?

?

<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? 可以保存數(shù)據(jù)更新前選中的值,這個(gè)屬性還需要指定row-key.

2? 方法?row-key? ? 這里的row-key設(shè)置的是id，如果重新請(qǐng)求中包含相同的id的數(shù)據(jù)時(shí)候會(huì)默認(rèn)選中

?

// 全選
const getSelectAll = (val) => {
  //判斷是否選中
  if (val) {
   //這里data.setatellite  是表格的data  利用toggleRowSelection
   //用于多選表格，切換某一行的選中狀態(tài)，如果使用了第二個(gè)參數(shù)，則是設(shè)置這一行選中與否（selected 
   //  為 true 則選中）
    data.setatellite.forEach((row) => {
      TabeleRef.value.toggleRowSelection(row, true);
    });
     

    //賦值給準(zhǔn)備全選全部的一個(gè)數(shù)組
    data.tabelAllTabel = JSON.parse(JSON.stringify(data.setatellite));
  } else {
    //如果全選狀態(tài)為false 清空
    TabeleRef.value.clearSelection();
    data.tabelAllTabel = [];
  }
};
   //給唯一的id
const getRowKeys = (row) => {
  return row.id;
};
//手動(dòng)表格勾選按鈕
const handGetTabel = (selection, row) => {
  const selected = selection.length && selection.indexOf(row) !== -1;
  //判斷手動(dòng)勾選的里面有這個(gè)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");
};

?