vue element 实现表格table联动数据的分页功能

首先 我自己封装了个分页组件pagniation 方便不同页面使用

创建 pagniation.vue

// pagniation.vue
<template>
  <div>
    <div class="table-pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageIndex"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>

  export default {
    name:'',
    props:[''],
    data () {
      return {
        pageIndex: 1, //当前页面显示的页码
        tableData: [],  //要传递给父组件的数组
        proList: [],  //父组件传递过来的数组
        pageSize: 5, // 每页显示的数据条数
        total: 0
      };
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {

     // 当每页显示的数据条数发发生改变时（pageSize），触发此方法
      handleSizeChange(pageSize) {
          this.pageSize = pageSize;
          this.handleCurrentChange(this.pageIndex);
      },
      // 当前页面显示的页码发生改变时（pageIndex），触发此方法
      // 用户点击页码或者上一页 下一页的按钮时，都会使pageIndex发生改变
      handleCurrentChange(pageIndex) {
          this.pageIndex = pageIndex;
          this.currentChangePage(this.proList, pageIndex,this.total);
      },
      // 分页的实现方法，data是需要分割的原始数据，pageIndex是当前页面选中的分页下标
      currentChangePage(data, pageIndex,total) {
        let _this = this
           // 分页开始的下标
          _this.proList = data
          console.log(total)
          _this.total = total
          let i = (pageIndex - 1) * this.pageSize;// 当前页面选中的分页下标-1 * 展示的数据的条数
          // 分页结束的下标
          let sum = pageIndex * this.pageSize;// 当前页面选中的分页下标 * 展示的数据的条数
          // 让原有的数据清空所以清空掉！
          _this.tableData = [];
          //实现数据的分割！
          if(sum < total){
            for (; i < sum; i++) {
            _this.tableData.push(data[i]);
          }
          
          }else {
            for (; i < total; i++) {
            _this.tableData.push(data[i]);
          }
          }
          //子组件调用父组件方法
            this.$emit("getTableData",_this.tableData);
          
        }
    },

    watch: {}

  }

</script>
<style scoped>
.table-pagination{
  padding: 20px;
  margin-top: 10px;
}
</style>

接着是父组件引入分页子组件

常规操作引入我就不说了 看图

<el-table
            v-loading="loading"
            :data="currPrjData"
            border
            style="width: 100%;"
            @cell-dblclick="cellmouseEnter"
          >
            <el-table-column prop="number" label="编号" width="180"></el-table-column>
            <el-table-column prop="name" label="发起人" width="180"></el-table-column>
            <el-table-column prop="fTime" label="发起时间"> </el-table-column>
            <el-table-column prop="qName" label="前承办人"> </el-table-column>
            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column prop="qTime" label="承办时间"> </el-table-column>
            <el-table-column prop="dName" label="当前办理人"> </el-table-column>
            <el-table-column prop="huanjie" label="当前环节"> </el-table-column>
          </el-table>
          <!--引入分页-->
          <pagination
            ref="pagination"
            @getTableData="getTableData"
          ></pagination>

接着是 在取得table数据的时候，调用分页组件的currentChangePage 方法 进行分割数据

画红线的地方是取得数据的调用，因为后台调用异步的原因，设立延时操作解决异步问题

最后就是取得分割的数据进行table绑定的：data 数据赋值

 // -----------------------------处理分页------------------------
      getTableData(data){
        this.currPrjData= data
      }
    },

效果：

启发原文链接：https://blog.csdn.net/weixin_44863676/article/details/102545387