目录
效果图
步骤:
1. 看elementui 官网上的案例,用到的方法是自带的 toggleRowSelection
2. 思路
原委
选中主表中的一条数据;判断与子表中的数据是否关联(如果子表的关联ID==主表的ID,则子表的这条数据显示被勾选)。
效果图
步骤:
1. 看elementui 官网上的案例,用到的方法是自带的 toggleRowSelection
2. 思路
判断 选中的这条数据的ID与弹窗里面的数据进行匹配,建一个临时数组,如果匹配成功,放入临时数组中,然后使用官网给的方法。
代码:
//1. 获取主表选中的数据
roleID =1
//弹窗
//2. 调接口获取子表格数据
that.$API.GetDepartmentUser(param).then((res) => {
let tempTabledata = JSON.parse(res.data.data);
that.$refs.cummonTable.SettableData(tempTabledata);
this.getselectData(tempTabledata); // lu 然后掉方法,这个方法就是给子表关联ID与主表的ID一样的显示被勾选
});
/**
* 3. 获取==角色ID的数据,页面展示被勾选
*/
getselectData(data) {
let tempselectData = []; //临时数组
data.map((item) => {
// 遍历 子表数据data中RoleID(关联ID)== roleID(主表ID),放入新数据
if (item.RoleID == this.RoleID) {
tempselectData.push(item);
}
});
console.log(tempselectData, "遍历之后的数据");
let rows = tempselectData;
//下面这个就是elementui 提供的方法
if (rows) {
rows.forEach((row) => {
if (this.dialogVisible) {
this.$nextTick(() => {
this.$refs.cummonTable.$refs.table.toggleRowSelection(row, true); //true 说明显示被勾选
});
}
});
} else {
}
},