vue+element处理前端分页

• Z时代
• 2024-01-10
• 分类：综合

需求：后台返回所有数据，前端实现分页效果。

由于数据量太大，加载很慢，页面也会造成卡顿现象，做成滚动条形式的不太合适

<div class="same-table">
       <el-table
              :data="dataShow"
              border
              ref="recordTable"
              :header-cell-style="{textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"
              style="width: 100%;"
              height="400">
              <el-table-column prop="projectName" label="项目名称" fixed></el-table-column>
        </e-table>
</div>

data(){
    return {
        rightsList: [],
        totalPageData: [],  //数组内套数组，每个数组就是一页数据
        currentPage: 1,     //当前显示页码
        pageSize: 10,       //每页显示的数量
        pageNum: 1,         //总页数
       totals: 0,          //总数量
       dataShow: [],       //当前要显示的数据 
    }
},
created() {
     this.getSystemDataSource();
},
methods() {
     //获取本月数据来源具体信息
       getSystemDataSource() {
          systemDataSourceApi.systemDataSource().then(res => {
              this.loginUser = res.result.loginUser;
              this.rightsList = res.result.pushData;
              this.totals = res.result.pushData.length;
              this.calcPageData();
          })
      },
      //计算页数
      calcPageData() {
             if (this.rightsList.length > 1) {
                 this.pageNum = Math.ceil(this.rightsList.length / this.pageSize) || 1;
                   console.log(this.pageNum, '总页数');
                }
             for(let i = 0; i< this.pageNum; i++) {
                    //每一页都是一个数组,根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为10， 则第一页是1-10条，即slice(0,10)
                    this.totalPageData[i] = this.rightsList.slice(this.pageSize * i, this.pageSize * (i+1));
              }
              //获取到数据后显示第一页内容,数组下标是从0开始,所以要减1
              this.dataShow = this.totalPageData[this.currentPage - 1];
              console.log(this.rightsList, '要显示的数据')
            },
            //每页显示的条数改变时候触发
            handleSizeChange(newPageSize) {
                this.pageSize = newPageSize;
                this.calcPageData();
            },
            //当前页改变时候触发
            handleCurrentChange(newPageSize) {
                this.currentPage  = newPageSize;
                this.dataShow = this.totalPageData[newPageSize - 1];
            }
}

以上是 vue+element处理前端分页 的全部内容， 来源链接： utcz.com/z/377391.html