场景:某一级目录下有几个二级目录,当选中二级目录中的某一项并提交到后台后,页面渲染时却选中了整个一级目录,但是数据却是正常的一条二级目录。
解决办法:
比对该目录下未提交的目录,并将其checked设为false,这种方法能解决二级目录全选中的问题,但是会出现另一个小问题,虽然二级目录选择状态正常了,但是一级目录依然是全选中状态,如下:
所以,在比对完当前目录是否在已选列表内后,还需要对未全选的父级做不确定选项的展示处理,el-tree的不确定选项设置办法为
部分选:checked = false, indeterminate = true
全选:checked = true, indeterminate = false
贴上代码:
<el-tree
ref="menu"
:data="menus"
node-key="id"
@node-expand="nodeClick"
:default-checked-keys="menuIds"
:props="defaultProps"
show-checkbox
/>
// 展开菜单时定位到选中菜单,子菜单非全选显示为不确定状态
nodeClick (obj,node,component) {
node.childNodes.forEach((item,index) => {
if (item.childNodes.length > 0 && item.checked) {
let cNode = item.childNodes, len = cNode.length;
for (let i = 0; i < len; i++) {
let tindex = this.menuIds.indexOf(cNode[i].data.id);
if (tindex == -1) {
item.childNodes[i].checked = false;
item.childNodes[i].parent.checked = false;
item.childNodes[i].parent.indeterminate = true;
}
}
}
})
},
效果展示: