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
// 监听选择按钮
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)
}
})
}
};
