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

1. 需求

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

2. 解决办法

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

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

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 中的 ref
		if (selectOptions.value.length> 0) {tableData.forEach((item, index) => {selectOptions.value.forEach((item1, index1) => {if (item.id== item1.id) {multipleTable.value.toggleRowSelection(tableData[index], true);
					}
				});
			});
		}
};