首页 前端知识 vue3 element-plus表格分页选中加默认回显选中

vue3 element-plus表格分页选中加默认回显选中

2024-10-17 10:10:54 前端知识 前端哥 269 860 我要收藏

1.需求

某个表单需要选择多条数据,点击选择按钮,弹框出来一个分页列表,选择多条数据,外面表单中显示选中的数据,可以删除数据,再次点击按钮,回显当前选中的数据。

2.解决办法

1.el-table加row-key,列表数据中的唯一标识

<el-table ref="multipleTable" :data="tableData" style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
</el-table>

2.多选type="selection"加reserve-selection属性为ture,缓存选中效果

<el-table-column :reserve-selection="true" type="selection" width="55" />

3.获取选中数据

//多选 选中
const handleSelectionChange = (value: any) => {
	selectOptions.value = value;
	console.log('选中数据,包含分页', selectOptions.value);
};

4.回显选中,建议列表弹框消失时销毁,再次进入弹框时,在次请求接口成功后,回显选中数据。

//默认选中 分页列表接口请求成功后使用
const multipleTable  = ref(null)
const getSel = () => {
//selectOptions.value为选中的数据  tableData为列表接口返回的数据 multipleTable为el-table中的ref
		if (selectOptions.value.length > 0) {
			tableData.forEach((item, index) => {
				selectOptions.value.forEach((item1, index1) => {
					if (item.id== item1.id) {
						multipleTable.value.toggleRowSelection(tableData[index], true);
					}
				});
			});
		}
};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19107.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!