element plus tabel 全选 保持数据

 element plus tabel 全选 保持数据_第1张图片

 

 tabelAllTabel: [],
 selectAll = false
     
            
     

1 方法   reserve-selection  可以保存数据更新前选中的值,这个属性还需要指定row-key.

2  方法 row-key    这里的row-key设置的是id,如果重新请求中包含相同的id的数据时候会默认选中

 

// 全选
const getSelectAll = (val) => {
  //判断是否选中
  if (val) {
   //这里data.setatellite  是表格的data  利用toggleRowSelection
   //用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 
   //  为 true 则选中)
    data.setatellite.forEach((row) => {
      TabeleRef.value.toggleRowSelection(row, true);
    });
     

    //赋值给准备全选全部的一个数组
    data.tabelAllTabel = JSON.parse(JSON.stringify(data.setatellite));
  } else {
    //如果全选状态为false 清空
    TabeleRef.value.clearSelection();
    data.tabelAllTabel = [];
  }
};
   //给唯一的id
const getRowKeys = (row) => {
  return row.id;
};
//手动表格勾选按钮
const handGetTabel = (selection, row) => {
  const selected = selection.length && selection.indexOf(row) !== -1;
  //判断手动勾选的里面有这个id 
  if (!selected) {
    const res = data.tabelAllTabel.findIndex((item) => item.id === row.id);
    data.tabelAllTabel.splice(res, 1);
  } else {
    data.tabelAllTabel.push(row);
  }
  console.log(data.tabelAllTabel, "data.tabelAllTabel");
};

 

你可能感兴趣的:(element,常用,vue,vue.js,javascript,elementui)