使用element-UI中的tabel表格组件实现在分页情况下，实现跨页数多选和多选回显的操作

使用element-UI中的tabel 表格组件实现在分页情况下，实现跨页数多选和多选回显的操作

• 在表格中实现跨页数多选的操作:

// 在表格中的第一项加上这段代码
// reserve-selection仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据
<el-table-column :reserve-selection="true" type="selection" width="55" align="center" />

/** 拿到选中的数据 */
<el-table  :data="userList" @selection-change="handleSelectionChange" />
// @selection-change="handleSelectionChange" 这个方法会返回选中的数组list
/** 多选选中表单数据 */
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      // 创建一个空对象用于存储唯一的userId
      var uniqueUserIds = {};

      // 使用filter方法过滤出具有唯一userId的用户
      var uniqueUsers = val.filter((item) => {
        return uniqueUserIds.hasOwnProperty(item.userId)
          ? false
          : (uniqueUserIds[item.userId] = true);
      });
      this.tableMultipleSelection = uniqueUsers;
    },
// tableMultipleSelection 这里面就是存的选中的数据

• tabel 表格，这里解决在实现多选之后，多选数据回显的操作

假如选中多个但不在同一页下, 可以在执行列表方法时重新执行这个方法,但如果有一条默认数据取消选中在切换页码时会被重新选中,此问题尚未解决 希望大佬指教

// 可以在后台返回数据之后调用table的toggleRowSelection方法来实现默认勾选
// 使用 ref 方法 ref="multipleTable"
<el-table  :data="userList" @selection-change="handleSelectionChange" ref="multipleTable"/>
<script>
  export default {
      methods:{
          getList(){
              this.userList.forEach((item) => {
              this.form.distributeUsers.forEach((menuItem) => {
                if (item.userId == menuItem.userId) {
                  this.$refs.multipleTable.toggleRowSelection(item, true);
                }
              });
            });
          }
      }
  }
</script>