直接上代码吧。
<el-tableref="customerListTable"border:data="dataSource2"v-loading="loading":row-style="{ height: '55px' }"header-cell-class-name="table-header"row-class-name="table-row"style="width: 100%"><el-table-column type="index" label="#" align="center" width="40" /><el-table-columnalign="center"label="平台代码"prop="spareCode"width="180px"/><el-table-column align="center" label="操作" fixed="right" width="50"><template slot-scope="scope"><a @click="handleDelete(scope.row)"> 删除 </a></template></el-table-column></el-table><!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page.currentPage":page-sizes="[10, 20, 50, 100]":page-size="page.pageSize":total="dataTotal.length"layout="total, sizes, prev, pager, next, jumper"></el-pagination>
JS
data:{return {dataSource2: [], //页面显示数据dataTotal: [], //总数据page: {total: 0, // 总页数currentPage: 1, // 当前页数pageSize: 10, // 每页显示多少条},}}
// 分页计算pagingOperation() {var keyValue = 0;//这里需要注意一下全部数据和你页面上的数据是同一个数据，只不过页面显示的是我们处理成10条数据var data = this.dataTotal; //全部数据for (var i = 0; i < data.length; i++) {keyValue = keyValue + 1;let key = { key: keyValue };data[i] = Object.assign(data[i], key);}var start =this.page.pageSize * this.page.currentPage - this.page.pageSize;var end = this.page.pageSize * this.page.currentPage;this.dataSource2 = data.slice(start, end);},// 每页条数改变函数handleSizeChange(val) {this.page.pageSize = val;this.pagingOperation();},//当前页改变函数handleCurrentChange(val) {this.page.currentPage = val;this.pagingOperation();},
这里有个删除逻辑（你可以用可不用）；
1，删除逻辑要考虑到当页码为第二页，总数据为11条，这时你删除第二页的第一条后，页面应该回到第一页，然后数据为10条。
handleDelete(record) {// 更新数据源this.dataSource2 = this.filterItems(this.dataSource2, record);this.dataTotal = this.filterItems(this.dataTotal, record);// 计算当前页面的数据总数const totalItems = this.dataSource2.length;// currentPage: 1, // 当前页数 pageSize: 10, // 每页显示多少条// 检查当前页是否还有数据if (totalItems < this.page.currentPage * this.page.pageSize &&this.page.currentPage > 1) {// 如果当前页没有数据且不是第一页，调整到上一页this.page.currentPage--;}//再次调用分页操作this.pagingOperation();this.$forceUpdate();},
当然这里面只是个人理解，如果你用到这段代码 然后有更好的实现方式 恳请留言。或者直接附上代码，我做更新 以便后续遇到直接使用；感谢！
