elementUI的el-table多页面选checkbox回显，拿到既可以使用

elementUI的el-table多页面选checkbox回显，拿到既可以使用

关于el-table的多选，相信只要做过项目的朋友都会用过，这其中有一个坑，是很大概率会踩到的，就是第一页选中了之后，切到第二页选择完之后，切换回第一页发现第一页选择的不见了，怎么办？？？
这个坑，老实说不难，但由于经常碰到，我总结了一下。

1. 利用 reserve-selection与row-key结合

使用方法：
1）在表格加上属性 :row-key="(row) => { return row.id }"
row-key绑定一个函数，该函数返回每行数据的唯一标识
2）在多选的column标签加上 :reserve-selection=“true” 开启
大功告成！是不是很快？
优点：快捷简单方便
缺点：1. elementUI的版本不能太低
2.某些需求无法满足，比如先给你一组选中的数据

2.选中数据后台获取回显

1.获取后台数据

 // 调用列表表格
    getList (val) {
      this.loading = true
      api
        .quotedPriceAgentList({
          pageSize: this.size,
          pageNum: this.page,
          order: this.order,
          sort: this.sort,
          currencyName: this.formSearch.currencyName,
          name: this.formSearch.name,
          remark: this.formSearch.remark,
          id: val.rolesId,
          agentId: val.uid
        })
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.list
            this.total = res.data.total
            this.loading = false
            // 多选框回显
            this.rowMultipleChecked(res.data.list)
          } else {
            this.$message({ type: 'error', message: res.msg })
          }
        })
    },

2.多选框回显方法

rowMultipleChecked (data) {
      if (data.length) {
        this.$nextTick(function () {
          data.forEach(item => {
            // 如果数据中的bindingStatus === true的话 让这一列选中
            if (item.bindingStatus === true) {
              // multipleTable 是这个表格的ref属性 true为选中状态
              this.$refs.multipleTable.toggleRowSelection(item, true)
            } else {
              this.$refs.multipleTable.toggleRowSelection(item, false)
            }
          })
        })
      }
    },

3.分页调用回显方法

    // 列表页数事件
    handleChange (val) {
      this.size = val
      this.getList(this.row)
      // 多选框回显
      this.rowMultipleChecked(this.tableData)
    },

如果还不懂可以评论或私信我。