需求：

分页表格实现分页选中，编辑时可以进行回显。

实现：

刚开始拿到需求后本来是自己写代码实现分页选中，后来查了文档，发现可以根据element-table中的提供的属性实现；如下图方式实现；

//element--table<el-table:data="tableList"@selection-change="selectionChangeHandle"ref="distributionList"style="width: 100%":max-height="tableHeight":row-key="getKey"><el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column><el-table-column type="index" label="#" align="center" width="70" /><el-table-column label="时间" prop="orderTime" min-width="170" /><el-table-column label="金额" prop="amount" min-width="150"></el-table-column></el-table>

js部分：

 getKey(row) {return row.id;  },//选中事件selectionChangeHandle(selection) {this.tableSelection = selection; //返回的selection是包含分页内的全部选中数据},

关于回显：

回显的思路就是拿到全部的数据，然后全部进行回显，方法是element如下：

  toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.distributionList.toggleRowSelection(row, true););} else {this.$refs.distributionList.clearSelection();}},

但是在回显过程中遇到了一个问题，后端返回给我的数据和表格中的数据结构不一样，导致我回显不了，在这里我先做的是回显后进行table渲染

mounted() {if (this.choseItems.length) {this.$nextTick(() => {this.toggleSelection(this.choseItems); //回显数据});}this.requestList(); //请求table数据},

实现效果：