el-table 多选回显，分页回显

实现el-table多选分页回显功能，左侧是分页的数据源，右侧是选择后的人员数据，切换下一页，选中的数据会在左侧表格回显。

实现：

  
    
      
        
          
          
            
              -
              
                {{ scope.row[item.prop] }}
              
            
          
        
      
      
        
          {{ tag.nickName }}
        
      
    
    0"
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="queryList"
    />
    
       取消
       确定
     
  

el-table的ref、row-key、select、select-all、type=”selection”、:reserve-selection=”true”都是需要设置的，并且表格绑定的data初始值不能为null，可以设置[]

设置row-key

  getRowKeys(row) {
      return row.userId
    },

表格选择数据，@select=”handleSelectionChange” @select-all=”selectAll”  选择单个和全选都要写

 handleSelectionChange(arr, row) {
     
      const bool = this.selectedUsers.some(user => user.userId === row.userId) // 存在返回true 否则返回false
      if (bool) {
        // 存在删除
        this.selectedUsers = this.selectedUsers.filter(user => user.userId !== row.userId)
      } else {
        // 添加
        this.selectedUsers.push(row)
      }
    },
    selectAll(arr){
      if (arr.length !== 0) {
        // 全选
        arr.forEach(item => {
          const bool = this.selectedUsers.some(user => user.userId === item.userId) // 存在返回true 否则返回false
          if (!bool) {
            // 不存在添加
            this.selectedUsers.push(item)
          }
        })
      } else {
        // 取消全选
        this.tableData.forEach(item => {
          this.selectedUsers = this.selectedUsers.filter(user => user.userId !== item.userId)
        })
      }
    },

删除右侧选中数据的时候，不仅要对右侧选中数组处理，还要把左侧数组的选中状态设为未选中；

 delUser(node) {
      this.selectedUsers = this.selectedUsers.filter(user => user.userId !== node.userId)
      this.tableData.forEach(item => {
        if (node.userId === item.userId) {
          // 存在添加
          this.$refs.table.toggleRowSelection(item, false)
        }
      })
    },

在数据编辑的时候，回显设置。注意切换table的page的时候要清除table的选中状态，重新设置选中状态，因为当右侧删除选中的数据不是当前页，分页切换的时候要刷新table的选中状态。

    queryList() {
      this.loading = true
      let queryParams = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      }
      queryUserData(queryParams).then((res) => {
          if (res.code === 200) {
            this.tableData = res.rows
            this.total = res.total
            // 切换分页的时候要清楚table的选中状态，在根据selectedUsers的值设置table选中状态
            this.$refs.table.clearSelection()
            if (this.selectedUsers.length > 0) {
              this.$nextTick(()=>{
                for (let i = 0; i {
                    if (item.userId == this.tableData[i].userId){
                      this.$refs.table.toggleRowSelection(this.tableData[i], true);
                    }
                  })

                }
              })
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

css样式设置

.bind-dialog {
  .content {
    display: flex;
    height: 406px;

    .left-user {
      flex: 1;
      margin-right: 12px;
    }
 

    .right-user {
      width: 310px;
      padding: 12px;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid #dfe6ec;
      border-radius: 6px;
      overflow: hidden auto;
    }
  }
  .mt12{
    margin-bottom: 12px;
  }
  .mr8{
    margin-right: 8px;
  }
  .mb8{
    margin-bottom: 8px;
  }
}