仿百度分页，自定义分页（Element + Vue）可用于card模式分页

最新推荐文章于 2022-10-28 14:19:10 发布

Ai卿

最新推荐文章于 2022-10-28 14:19:10 发布

阅读量1k

点赞数

分类专栏： JS+HTML 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_42307369/article/details/106362700

版权

本文介绍了如何使用Element UI和Vue.js实现一个自定义分页功能，特别适合于展示卡片模式的分页。通过将page.pageSize和pageGroup设置为相同参数，可以轻松调整以适应不同场景的卡片展示需求。

摘要由CSDN通过智能技术生成

HTML

<el-row>
  <el-col :span="24">
    <el-row>
      <el-button @click='changePage(page.currentPage - 1)' size="mini">上一页</el-button>
      <span  v-if="pageGroupList[0] > 2">...</span>
      <span v-for="(item ,i) in pageGroupList" :key="i" @click="changePage(item)">
        {
  {item}}
      </span>
      <el-button @click='changePage(Number(page.currentPage) + 1)' size="mini">下一页</el-button>
      {
  {page.currentPage}}/{
  {totalPage}}页
        前往：<el-input style="width: 50px" v-model="goto" size="mini"></el-input>
        <el-button @click="define(goto)" size="mini">确定</el-button>
      </el-row>
  </el-col>
</el-row>

JS :