1.需求

某個(gè)表單需要選擇多條數(shù)據(jù)，點(diǎn)擊選擇按鈕，彈框出來(lái)一個(gè)分頁(yè)列表，選擇多條數(shù)據(jù)，外面表單中顯示選中的數(shù)據(jù)，可以刪除數(shù)據(jù)，再次點(diǎn)擊按鈕，回顯當(dāng)前選中的數(shù)據(jù)。

2.解決辦法

1.el-table加row-key，列表數(shù)據(jù)中的唯一標(biāo)識(shí)

<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.獲取選中數(shù)據(jù)

//多選 選中
const handleSelectionChange = (value: any) => {selectOptions.value = value;console.log('選中數(shù)據(jù)，包含分頁(yè)', selectOptions.value);
};

4.回顯選中，建議列表彈框消失時(shí)銷(xiāo)毀，再次進(jìn)入彈框時(shí)，在次請(qǐng)求接口成功后，回顯選中數(shù)據(jù)。

//默認(rèn)選中 分頁(yè)列表接口請(qǐng)求成功后使用
const multipleTable  = ref(null)
const getSel = () => {
//selectOptions.value為選中的數(shù)據(jù)  tableData為列表接口返回的數(shù)據(jù) 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);}});});}
};