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) => {
let selected = rows.length && rows.indexOf(row) !== -1 // true或者false
if(selected) {
let status = tableDataChild.dataChank.find((items: any) => {
return items.id == row.id
})
if(!status) {
tableDataChild.dataChank.push(row)
}
} else {
let status = tableDataChild.dataChank.findIndex((items: any) => {
return items.id == row.id
})
if(status != -1) {
tableDataChild.dataChank.splice(status,1)
}
}
};
// 全选按钮
const selectAll = (row: any) => {
let selected = row.indexOf(tableDataChild.data[0]) !== -1 // true或者false
// console.log(selected)
if(selected) {
row.map((item: any) => {
let status = tableDataChild.dataChank.find((items: any) => {
return items.id == item.id
})
if(!status) {
tableDataChild.dataChank.push(item)
}
})
} else {
tableDataChild.data.map((item: any) => {
let status = tableDataChild.dataChank.findIndex((items: any) => {
return items.id == item.id
})
if(status != -1) {
tableDataChild.dataChank.splice(status,1)
}
})
}
};
网友评论