饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤饿了么UI中的el-table常见的翻页

正常情况下，在一个后台管理系统中，都会有勾选选中功能，也都会有翻页功能。本文记录一下，比较常见的翻页勾选功能和翻页序号递增功能的实现方式

翻页勾选保留功能第一步和第二步

第三步

methods: { /* 第三步，一般我们都是用id作为每一行数据的特殊标识，所以这里返回的是row下面的id作为标识。当然这里不return row下面的id也行，只要能够确保某个字段是独一无二的，不会重复的，就可return return row下面的这个字段也是可以的 */ getRowKey(row) { console.log("看看每一行的数据", row); return row.id; }, }

翻页序号递增功能 【饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤】翻页序号递增功能不像翻页勾选保留功能那样还需要每一条数据做标识，而是通过计算得出来的。
第一步

第二步

methods: { // 序号翻页递增 indexMethod(index) { console.log('索引数下标',index) let nowPage = this.tablePages.pageIndex; //当前第几页，根据组件取值即可 let nowLimit = this.tablePages.pageSize; //当前每页显示几条，根据组件取值即可 return index + 1 + (nowPage - 1) * nowLimit ; // 这里可以理解成一个公式 }, }