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中的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);
}
});
});
}
};