element-plus el-table表格分页选择，数据回显

需求：

1、新建表单信息，选择电厂，电厂列表为后端分页，来回翻页需要保持勾选
2、编辑时候，需要数据回显，把上次保存的数据勾选上

解决思路

如果只是想实现翻页保留勾选，给添加reserve-selection属性就可以实现（row-key需要有效），每次勾选，事件都会把所有勾选行返回，这个比较简单。

但是本次需求更复杂一些，el-table提供的全选和单选勾选事件，不能直接返回哪个勾选和取消了，需要我们自己来对比判断。

关键代码

因为页面代码多，容易干扰，只放了部分，最重要的在单选和全选按钮勾选事件处理上。

template

<el-table 
 ref="plantTableRef" 
 :data="plantTable.tableData" 
 @select="plantMethods.selectRow"  
 @select-all="plantMethods.selectAll"
 row-key="id" 
>
 <el-table-column type="selection" width="55" />
 <el-table-column type="index" label="序号" width="150" />
 <el-table-column prop="name" label="电厂名称" />
el-table>
 
<Pagination :pageSize="page.pageSize" :pageTotal="page.total" @pageFunc="pageFunc" />

script

<script setup lang="ts">
import { ref, reactive, watch,nextTick } from "vue";
//翻页
const pageFunc = (data: { pageSize: number; pageNum: number }) => {
  page.pageSize = data.pageSize;
  page.pageNum = data.pageNum;
  plantMethods.getTable();
};
//表格数据
interface Plant{
  id:string;
  organName:string;
}
const plantTable = reactive({
  plantListVisible: false,
  tableData: [] as Plant[],
  plantSelected:[] as string[],//选中的行id
});
const plantTableRef = ref();
//表格相关事件
const plantMethods = {
  getTable() {
    const { pageNum, pageSize } = page;
    const params = {
      current: pageNum,
      size: pageSize,
    };
    getPlant(params).then((res) => {
        plantTable.tableData = res.data?.records ?? [];
        page.total = res.data?.total;
        // 获取数据后，遍历选中（关键代码）
        nextTick(() => {
          plantTable.tableData.forEach(item => {
            let result = plantTable.plantSelected.find(row => row == item.id);
            if (result) {
              plantTableRef.value.toggleRowSelection(item, true);
            }
          });
        });
    });
  },
  // 全选/全不选（关键代码）
  selectAll(selection: Plant[]) {
    if (selection.length) {
      selection.forEach(row => {
        let result = plantTable.plantSelected.some(item => item == row.id);
        if (!result) {
          plantTable.plantSelected.push(row.id);
        }
      });
    } else {
      plantTable.tableData.forEach(row => {
        plantTable.plantSelected = plantTable.plantSelected.filter(item => item !== row.id);
      });
    }
  },
  // 行选择/取消（关键代码）
  selectRow(selection: Plant[], row: Plant) {
    let result = selection.some(item => item.id == row.id);
    if (result) {
      plantTable.plantSelected.push(row.id);
    } else {
      plantTable.plantSelected = plantTable.plantSelected.filter(item => item !== row.id);
    }
  },
  //确定选择
  confirmHandle() {
   //ruleForm.reportPlants为真正保存的选中id数组
    ruleForm.reportPlants=JSON.parse(JSON.stringify(plantTable.plantSelected));
    plantMethods.cancelHandle();
  },
  //取消选择
  cancelHandle() {
    plantTable.plantListVisible = false;
    plantTable.plantSelected=[];
    page.pageNum=1;
    page.pageSize=10;
    page.total=0;
  },
};
</script>