element-ui 表格分页勾选数据

新增

使用:row-key

编辑

主要是回显数据，如果使用 :row-key,会造成取消了，但是翻页后，无法取消的问题。

• 给表格使用 select 和 select-all 事件去选择
• 然后把选择的数据给请求，使用this.$refs.multipleTable.toggleRowSelection(item, true)

// 获取需要回显的数据
 this.checkboxData = []
 const deviceList = val.deviceIds.split(",").map(Number);
  if (deviceList.length > 0) {
        this.checkboxData = deviceList;
      }

//select事件
handleSelect(selection, row) {
      let selectBool = selection.length && selection.indexOf(row) !== -1;
      //取消勾选
      if (!selectBool) {
        this.checkboxData.forEach((item, i) => {
          if (item === row.id) {
            this.checkboxData.splice(i, 1);
          }
        });
      } else {
        // 选中
        this.checkboxData.push(row.id);
      }
    },


//select-all 事件
      // 全选
      if (selection.length > 0) {
         this.checkboxData = this.checkboxData.concat(
          Array.from(new Set(selection.map((item) => item.id)))
        );
      } else {
        // 取消全选
        this.tableData.forEach((item) => {
          this.checkboxData.forEach((val, i) => {
            if (item.id === val) {
              this.checkboxData.splice(i, 1);
            }
          });
        });
      }


//勾选渲染

getList(params).then(res=>{
  this.tableLoading = false;
            this.tableData = res.data.records;
            this.pagers.total = res.data.total;
            this.$nextTick(() => {
              this.tableData.forEach((item) => {
                this.checkboxData.forEach((val) => {
                  if (item.id === val) {
                    this.$refs.multipleTable.toggleRowSelection(item, true);
                  }
                });
              });
            });
})


//外部传值
let list = []
const errrorList = ["",null,undefined]
search(row){
  if(!errorList.includes(row.id) && row.id.split(",").map(Number).length > 0 ){
    list = row.id.split(",").map(Number)
}else{
    list = []
}

}

jumpDev(){
  this.$refs.multipleTable.search( Array.from(new Set(list)))
}
concatDev(lists){
  list = Array.from(new Set(lists))
}