vue element UI中的el-tree组件中,加载回显时默认选中一些子元素,整个组就会默认选中?

5,222 阅读2分钟

只要一组中有一个元素被选中,整个组都会被选中,这个怎么解决?

最近做的管理权限用到这个树组件了,遇到这个bug,其实挺简单的哈哈哈!!!


下面是我做这个模块的思路步骤:

第一步:获取选中节点的id,获取有两种方式:通过 node 或通过 key。如果需要通过 key 来获取或设置,则必须设置node-key



element文档中这个方法只是获取当前选中的节点的id,此时的父节点的选择状态为半选状态,若把此id组成的list传给后台的话,回显时候会发现(假如父节点有3个子节点,我们只勾选了一个子节点)此菜单页面没有显示

上述问题是因为我们在给后台传menuidList的时候并未给后台传此时的父节点,也就是这个半选状态的父节点,element文档中没有获取父节点半选状态的方法,经查阅getHalfCheckedKeys()这个方法可以获取到半选状态的父节点的id,

因此,我们把所有选中节点和半选中节点合并在一起就是我们所需要的数据了

menuIdList = getHalfCheckedKeys().concat(getCheckedKeys());

直接把menuIdList传值给后台就ok了,

这样就万事大吉了吗?并没有,这时候你会发现另一个bug。。。。。

 也是回显时候的问题(假如父节点有3个子节点,我们只勾选了一个子节点),此时的父节点是全选的状态,之前没有勾选的两个子节点此时也被勾选了,原因是因为我们在上边把半选父节点的id传值给后台所导致的,是不是你已经懵圈了???别紧张,这只是一个小小bug,

下面我说下我的解决方法:

此时用到递归(找当前项所包含的子节点children),这里就不展示了,,,

废话不多说:若勾选的子节点的长度不等于当前子节点的总长度,就从menuIdList里边把当前的半选状态父节点的id剔除就ok,我该说的都说完了,以上方法本人亲试完全没有问题,接下来就去解决你们的问题吧,去吧皮卡丘😄