el-table多选分页回显

1.多选项添加 :reserve-selection="true"

<el-table-column type="selection" align="center" width="55" :reserve-selection="true"
></el-table-column>

reserve-selection : 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

2.设置参数记录已选项selectedList

3.设置el-table的selection-change事件：取消或者选择就会触发该事件

需要考虑：

1. 在某一页时，第一次选择一项，第二次全选当页，已选项中已存在的某一项不再添加
2. 先选择一项时，再全选，在取消全选，要删除取消已选项

**注意：**因为做了分页，对于全选和取消全选，都是本页数据的全选，

   //这里的brmOrderId就是row-key，要确保其唯一性//tableDataList 表示本页的数据handleSelectionChange(rows) {// 不存在就添加进去rows.forEach(row => {if (!this.selectedList.some(item => item.brmOrderId === row.brmOrderId)) {this.selectedList.push(row)}});// list是此页中未选项，对于那些选择，再取消的项，需要在selectedList中删除const list = []this.tableDataList.forEach(item => {if (!rows.some(row => row.brmOrderId === item.brmOrderId)) {list.push(item)}});list.forEach(item => {const index = this.selectedList.findIndex(selectIndex => selectIndex.brmOrderId === item.brmOrderId)if (index !== -1) {this.selectedList.splice(index, 1)}})},

4.选项回显

**场景：**在第一页中选择了一项，切换到第二页全选，再切换为第一页，要勾选第一页的已选项

**实现：**在获取当前页面数据的时候，与selectedList中的数据对比，如果有已选项，就勾选

代码：

    // rows是selectedList; tableDataList当前页接口返回的数据toggleSelection(rows) {this.$nextTick(() => {setTimeout(() => {if (rows && this.tableDataList.length !== 0) {this.tableDataList.forEach((dataItem) => {rows.forEach(item => {if (item.brmOrderId === dataItem.brmOrderId) {// toggleRowSelection是勾选 表中符合要求的选项this.$refs.projectTables.toggleRowSelection(dataItem, true)}})})} else {// 清空用户的选择this.$refs.projectTables.clearSelection();}}, 0);});}