element表格有默认数据情况下分页数据回显

情景：vue用element表格做一个选择人员的组件，需求是会有默认选中的数据传进来，然后切换分页的情况下要记住选中的数据。

问题分析：element表格官方文档里写着可以设置

:reserve-selection="true"和:row-key="getRowKeys"

以在分页情况下记住你选中的数据，但这种方式不支持默认就要有选中数据的情况。我的处理方式如下：

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    :row-key="getRowKeys"
    @selection-change="handleSelectionChange"
    v-loading="loading"
>
</el-table>

methods: {
  getRowKeys(row) {
    return row.userId; // id为列表数据的唯一标识
  },
  refreshSelect() {
    let _select = []
    let _noSelect = []
    this.$refs.multipleTable.tableData.forEach(val => {
      if (this.multipleSelection.find(select => {
        return val.userId == select.userId
      })) {
        _select.push(val)
      } else {
        _noSelect.push(val)
      }
    })
    _select.forEach(row => {
      this.$refs.multipleTable.toggleRowSelection(row, true);
    });
    _noSelect.forEach(row => {
      this.$refs.multipleTable.toggleRowSelection(row, false);
    });
  },
  toggleSelection(rows) {
    if (rows) {
      rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    } else {
      this.$refs.multipleTable.clearSelection();
    }
  },
  handleSelectionChange(val) {
    //此处由于编辑的时候有已选择的人员传进来，
    // element Table :reserve-selection="true"和:row-key="getRowKeys"的组合虽然在你手动勾选时能记住分页（即数据刷新后的）勾选的数据，
    // 但无法记住你编辑传进来的默认值，所以此处需要手动合并数组并去重
    //如果没有传进来的默认数据，那么只需要一行代码this.multipleSelection = val即可，无需下面一大堆
    let arr = this.multipleSelection.concat(val)
    let hash = {};
    //去重
    arr = arr.reduce(function (item, next) {
      hash[next.userId] ? '' : hash[next.userId] = true && item.push(next);
      return item
    }, [])
    //获取当前页未被选择的项
    let _select = []
    let _noSelect = []
    this.$refs.multipleTable.tableData.forEach(data => {
      if (val.find(select => {
        return data.userId == select.userId
      })) {
        _select.push(data)
      } else {
        _noSelect.push(data)
      }
    })
    //如果当前页未被选择的项存在于总回显数据中，将其删除
    _noSelect.forEach(val => {
      if (arr.find(select => {
        return val.userId == select.userId
      })) {
        arr.splice(arr.findIndex(item => item.userId === val.userId), 1)
      }
    })
    this.multipleSelection = arr

  },
  
}

完整组件代码在  https://github.com/bestwangxin/shareCode/blob/master/selectPerson.vue    组建内有部分自己的业务逻辑代码，请自己甄别。