表格视图代码
<el-table ref="multipleTableRef" :data="tabledata" border header-cell-class-name="table-header"
highlight-current-row :row-key="getRowKeys" @select="handleSelect" @select-all="selectall">
<el-table-column type="selection" width="55" :reserve-selection="true" />
<el-table-column prop="id" label="ID" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="city" label="城市" />
</el-table>
:row-key="getRowKeys" && :reserve-selection="true" // 翻页不置空选中需用到此方法和属性(行数据的 Key,用来优化 Table 的渲染; 在使用reserve-selection功能与显示树形数据时,该属性是必填的。)
@select="handleSelect" 当用户手动勾选数据行的 Checkbox 时触发的事件-勾选操作
@select-all="selectall" 当用户手动勾选全选 Checkbox 时触发的事件-全选(选中和取消)
数据定义
interface TableCommit {
id: number;
name: string;
age: number;
city: string;
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 列表数据
var tabledata = ref<TableCommit[]>([]);
// 添加数据
var addform = reactive([]);
数据操作
// 翻页不置空选中需用到此方法
const getRowKeys = (row: any) => {
return row.id;
};
//请求数据预勾选数据
const handleCommitSearch = () => {
getTabledata(params).then((res: any) => {
tabledata.value = res.data;
// 处理修改选择的数据勾选
nextTick(() => {
getTabledata.value.forEach((item) => {
multipleTableRef.value!.toggleRowSelection(item, true);
});
});
}
// 勾选
const handleSelect = (selection: any, row: any) => {
//选中元素在数组里面代表选中--添加
if (selection.includes(row)) {
addform.push(row);
} else {
//选中元素不在数组里面代表取消选中--移除
addform.splice(addform.indexOf(row), 1);
}
}
// 全选or全取消
const selectall = (rows: any) => {
if (rows.length == 0) {
// 取消全选操作(如果用户已全选再取消,取消的数据不可得)需要借助请求展示在列表的数据
// 借助列表的数据做移除操作
tabledata.value.forEach((element: any) => {
addform.splice(addform.indexOf(element.), 1);
});
} else {
// 全选操作
rows.forEach((element) => {
addform..push(element.);
});
// 数据去重
addform = Array.from(new Set(addform));
}
}
如果对您有帮助,帮忙关注点赞分享,您的鼓励是我更新最大的动力!谢谢~~