解决element-ui u-tree树形组件父节点半勾选回显数据问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题描述:
因为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);
}
};
这样就完成了父节点半勾选需求
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)