el-table多选分页回显

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);
      });
    }