前端分页（vue前端分页，el分页，el-pagination分页，饿了吗分页）

简述：作为一名前端开发者，分页功能我们经常会用到，但有时候后端会把数据一次性给我们，需要我们自己处理数据，做前端分页，下面给大家介绍如何实现，其实很简单，就是使用数组的slice方法，进行截取计算；

1、分页标签，属性；

2、定义相关数据；

3、请求接口后返回总数据，然后对数据进行筛选处理 ，计算筛选后，循环展示padingLsit，就可以了；

4、分页相关功能，点击分页时，赋值，调用相关接收数据方法，重新渲染；

完整代码>>

     <!-- 搜索分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :page-sizes="[6, 12, 18, 24]"
          :current-page="currentPage"
          :total="total"
        >
        </el-pagination>

    // 分页参数
      total: 0,//总数
      pageSize: 6, //每页多少条数据
      currentPage: 1, //当前页
      searchList: [],//用来接收总数据
      padingList: [], //计算后需要展示的页面数据

    // 点击搜索
    choseSearch() {
      searchTitle(this.searchCon).then((res) => {
        // console.log(res);
        const data = res.rows;
        this.total = res.total;
        this.searchList = data;
        // 前端分页，关键一步；
        this.padingList = this.searchList.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      });
    },

    // 分页函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.choseSearch();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.choseSearch();
    },      

感觉有用，就一键三连，感谢(●'◡'●)