Vue结合Rick Morty API实现带省略号的分页按钮功能如何实现？

这个分页展示逻辑建议用Vue computed计算属性实现，CSS无法处理动态页码的判断逻辑，纯JS处理更灵活易维护。

实现思路 #

1. 先从Rick and Morty API的返回结果中拿到总页数totalPage（接口返回的info.pages字段，你的场景总页数为20）
2. 在计算属性中根据当前选中页码currentPage动态生成分页展示数组，数组中支持存放数字（页码）和特殊标识（省略号）
3. 模板中循环数组时，根据元素类型判断渲染页码按钮还是省略号文本

代码示例 #

模板部分修改

<div class="button_container">
  <template v-for="(item, i) in pages" :key="i">
    <!-- 是页码就渲染按钮 -->
    <button 
      v-if="typeof item === 'number'"
      @click="pageChange(item)"
      :class="{ active: item === currentPage }"
    >
      {{ item }}
    </button>
    <!-- 是省略号标识就渲染文本 -->
    <span v-else>...</span>
  </template>
</div>

逻辑部分修改

export default {
  data() {
    return {
      currentPage: 1, // 当前选中页码
      totalPage: 20, // 总页数，实际开发从接口返回结果赋值
    }
  },
  computed: {
    pages() {
      const res = []
      // 当前页在前5页时，展示前5页+省略号+最后一页
      if (this.currentPage <= 5) {
        for (let i = 1; i <= 5; i++) res.push(i)
        res.push('ellipsis')
        res.push(this.totalPage)
        return res
      }
      // 当前页在最后5页时，展示第一页+省略号+最后5页
      if (this.currentPage >= this.totalPage - 4) {
        res.push(1)
        res.push('ellipsis')
        for (let i = this.totalPage - 4; i <= this.totalPage; i++) res.push(i)
        return res
      }
      // 可选补充：当前页在中间区域的展示逻辑
      res.push(1)
      res.push('ellipsis')
      for (let i = this.currentPage - 2; i <= this.currentPage + 2; i++) res.push(i)
      res.push('ellipsis')
      res.push(this.totalPage)
      return res
    }
  },
  methods: {
    pageChange(page) {
      this.currentPage = page
      // 这里调用接口拿对应页码的数据
    }
  }
}

以上代码正好符合你的需求：默认currentPage=1时展示1 2 3 4 5 ... 20，点击20页后currentPage=20满足>=20-4=16的条件，就会展示1 ... 16 17 18 19 20。

内容的提问来源于stack exchange，提问作者Dave