1.
<el-table ref="multipleTableRef" :data="tableDataChild.data" @select="handleSelectionChange" @select-all="selectAll" style="width: 100%" current-row-key="id" row-key="id">
? ??<el-table-column type="selection" width="55" :reserve-selection="true"/>
</el-table>
2.
// 分頁改變
const onHandleCurrentChange = (val: number) => {
? tableDataChild.dataChank = multipleSelection.value;
? nextTick(() => {
? ? tableDataChild.pageNum = val;
? ? httpType();
? })
};
3.下次打開選中回顯
nextTick(() => {
? ? tableDataChild.data.forEach((row:any) => {
? ? ? for( let i of tableDataChild.dataChank ) {
? ? ? ? if( row.id == i.id ) {
? ? ? ? ? multipleTableRef.value.toggleRowSelection(row,true);
? ? ? ? }
? ? ? }
? ? })
? });
4.清空多選
import type { ElTable } from "element-plus";
const multipleTableRefs = ref<InstanceType<typeof ElTable>>();
multipleTableRefs.value!.clearSelection()
5.判斷多選和單選是否選擇村生，返回true和false
// 監(jiān)聽選擇按鈕
const handleSelectionChange = (rows: any, row: any) => {
if( rows.length && rows.indexOf(row) !== -1 ) {
? ? if( tableDataChild.dataChank.some((item: any) => item.id == row.id) == false ) tableDataChild.dataChank.push(row)
? } else {
? ? let idx = tableDataChild.dataChank.findIndex((item: any) => item.id == row.id)
? ? if( idx != -1 ) {
? ? ? tableDataChild.dataChank.splice(idx, 1)
? ? }
? }
};
// 全選按鈕
const selectAll = (row: any) => {
if( row.indexOf(tableDataChild.data[0]) !== -1 ) {
? ? tableDataChild.dataChank.push( ...row )
? ? tableDataChild.dataChank = tableDataChild.dataChank.filter( (item: any, index: number, self: any) => {
? ? ? return self.findIndex((itemChild: any) => itemChild.topicId == item.topicId) === index
? ? } )
? } else {
? ? tableDataChild.data.forEach((item: any) => {
? ? ? let num = tableDataChild.dataChank.findIndex( (itemChild: any) => itemChild.topicId == item.topicId )
? ? ? console.log(num)
? ? ? if( num != -1) {
? ? ? ? tableDataChild.dataChank.splice(num,1)
? ? ? }
? ? })
? }
};
