element plus tabel 全选 保持数据

 

 

<div class="allcheckbox">

            <el-checkbox
              label="全选"
              name="type"
              @change="getSelectAll"
              v-model="selectAll"
            />

</div>

 tabelAllTabel: [],
 selectAll = false

     <el-table
            :data="data.setatellite"
            height="320"
            class="orb-form"
            size="small"
            :row-class-name="tableRowClassName"
            @selection-change="getFacTable"
            ref="TabeleRef"
            :row-key="getRowKeys"
            @select="handGetTabel"
          >
            <el-table-column
              type="selection"
              width="50"
              :reserve-selection="true"
            />
     </el-table>

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