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> 

分页效果：