vue3+element-plus表格分页选中加默认回显选中

1.需求

某个表单需要选择多条数据，点击选择按钮，弹框出来一个分页列表，选择多条数据，外面表单中显示选中的数据，可以删除数据，再次点击按钮，回显当前选中的数据。

2.解决办法

1.el-table加row-key，列表数据中的唯一标识

<el-table ref="multipleTable" :data="tableData" style="width: 100%" row-key="id" @selection-change="handleSelectionChange"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" />
</el-table>

2.多选type="selection"加reserve-selection属性为ture，缓存选中效果

<el-table-column :reserve-selection="true" type="selection" width="55" />

3.获取选中数据

//多选 选中
const handleSelectionChange = (value: any) => {selectOptions.value = value;console.log('选中数据，包含分页', selectOptions.value);
};

4.回显选中，建议列表弹框消失时销毁，再次进入弹框时，在次请求接口成功后，回显选中数据。

//默认选中 分页列表接口请求成功后使用
const multipleTable  = ref(null)
const getSel = () => {
//selectOptions.value为选中的数据  tableData为列表接口返回的数据 multipleTable为el-table中的refif (selectOptions.value.length > 0) {tableData.forEach((item, index) => {selectOptions.value.forEach((item1, index1) => {if (item.id== item1.id) {multipleTable.value.toggleRowSelection(tableData[index], true);}});});}
};