问题描述:
因为e-tree组件默认关闭了check-strictly就严格遵循了父子关联关系,只要父节点勾选上了,全部子节点默认会勾选上。如果接口返回的勾选节点id包括了父节点,其子节点都是会被e-tree默认勾上
解决方法1(较简单,但不完善)
参考解决方法1博客,大致的思路就是动态控制check-strictly,在回显之前开启父子节点互不关联,然后在节点获取到赋值id后再关闭,这样就能实现了 关键代码如下
具体文章可移步解决方法1博客
但是这里也会有bug 就是父节点不会出现半勾选状态。
这里就引出第二个解决方法
解决方法2
这里的思路就不是从check-strictly入手了,是一直默认关闭check-strictly属性。
找到全部的子节点勾选id,单单给子节点勾选上,再通过父子关联关系让e-tree自动半勾选或勾选上父节点。我这里的解决方法是让后端同事处理下返回值,告诉前端哪些是父节点,然后在过滤掉,仅仅给子节点赋值。具体代码如下
接口返回是这样的 leaf为true就是父节点 这里要过滤掉
<el-tree
class="filter-tree"
:data="menuTree"
:props="{
children: 'subMenu',
label: 'menuName',
}"
node-key="id"
:highlight-current="true"
:expand-on-click-node="false"
show-checkbox
default-expand-all
:default-checked-keys="formData.roleBindMenuDto.menuIdList"
ref="menuTreeRef"
/>
//js代码
// 获取角色菜单
const getRoleMenu = async (id) => {
const res = await httpPost(`/uac/role/getBindingMenuByRoleId`, {
roleId: id,
applicationId: 3,
});
if (res.code == 200) {
//这里仅仅默认勾选上子节点 过滤掉带leaf的父节点
formData.value.roleBindMenuDto.menuIdList = res.result.bindingMenuList
.map((v) => {
if (!v.leaf) return v.menuId;
})
.filter((v) => v);
} else {
errorMessage(res.message);
}
};
这样就完成了父节点半勾选需求