vue element-----实现table前端分页

代码实现展示：

<template>
  <div>
    <el-table :data="tableList" border style="width: 100%;">
      <el-table-column align="center" type="index" label="序号" width="50" />
      <el-table-column prop="id" header-align="center" align="center" label="缺陷ID" />
      <el-table-column prop="name" header-align="center" align="center" label="名称" />
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container" align="center">
      <el-pagination :current-page="pageData.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageData.size" :total="pageData.total" layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pageData: {
        total: 0,//总条数
        size: 10,//默认每页显示10条
        currentPage: 1,//默认显示第一页
      },
      start: 0, // 处理前端分页数据保存
      end: 0, // 处理前端分页数据保存
      tableData: [],
      tableList: [], //table前端分页后显示数据
      dataVal: [
        { id: 1, name: "测试1" },
        { id: 2, name: "测试2" },
        { id: 3, name: "测试3" },
        { id: 4, name: "测试4" },
        { id: 5, name: "测试5" },
        { id: 6, name: "测试6" },
        { id: 7, name: "测试7" },
        { id: 8, name: "测试8" },
        { id: 9, name: "测试9" },
        { id: 10, name: "测试10" },
        { id: 11, name: "测试11" },
      ],//需要展示的所有数据
    };
  },

  created() {},
  mounted() {},

  computed: {},

  methods: {
    //获取数据的方法---假设现在获取到的数据就是dataVal，把this.dataVal赋给this.tableData，通过方法分段后，赋给this.tableList(table前端分页后显示数据)。
    getTableData() {
      this.tableList = [];
      this.tableData = [];
      // table数据处理
      this.tableData = this.dataVal;
      this.tableList = this.dataVal.slice(0, this.pageData.size);
      this.pageData.total = this.tableData.length;
      this.pageData.currentPage = 1;
      this.start = 0;
      this.end = this.pageData.size;
    },
    
    // 分页点击方法
    //改变每页展示的条数
    handleSizeChange(val) {
      const preTable = this.tableData.slice(0, this.start);
      const LastTable = this.tableData.slice(this.end);
      this.tableData = preTable.concat(this.tableList).concat(LastTable);
      this.pageData.size = val;
      this.start = this.pageData.size * (this.pageData.currentPage - 1);
      this.end =
        this.pageData.size * (this.pageData.currentPage - 1) +
        this.pageData.size;
      this.tableList = this.tableData.slice(
        this.pageData.size * (this.pageData.currentPage - 1),
        this.pageData.size * (this.pageData.currentPage - 1) +
          this.pageData.size
      );
    },
    //改变页码
    handleCurrentChange(val) {
      const preTable = this.tableData.slice(0, this.start);
      const LastTable = this.tableData.slice(this.end);
      this.tableData = preTable.concat(this.tableList).concat(LastTable);
      // 处理数据后分页
      this.pageData.currentPage = val;
      this.start = this.pageData.size * (this.pageData.currentPage - 1);
      this.end =
        this.pageData.size * (this.pageData.currentPage - 1) +
        this.pageData.size;
      this.tableList = this.tableData.slice(
        this.pageData.size * (this.pageData.currentPage - 1),
        this.pageData.size * (this.pageData.currentPage - 1) +
          this.pageData.size
      );
      console.log("显示tablelist", this.tableList);
    },
  },
};
</script>

分页效果：