vue3 Table数据预勾选、翻页、勾选操作、全选等操作数据更新

表格视图代码

<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));
	}
}

如果对您有帮助，帮忙关注点赞分享，您的鼓励是我更新最大的动力！谢谢~~