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))
}

__EOF__

本文作者：云霄紫潭
本文链接：https://www.cnblogs.com/0520euv/p/17884726.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！