在el-tree中回显数据有一个很明显的坑,只要回显的数据里有父级的id,不管当前父级下的子级是部分选中还是全选,父级的check效果都是全选。
预计效果图:
实际效果图:
我看了很多博主说用setChecked循环便利来勾选叶子节点,但我试了半天也没用,setTimeout,nextTick都试了,无效。所以干脆自己写。我还是用的setCheckedKeys来实现勾选的,逻辑很简单,arr
是存储叶子节点的数组。利用getNode()
获取当前节点,在后段返回给我的数据中循环判断当前节点是否叶子结点,是存入arr
当中。在用setcheckedKey(arr)
来回显数据,这样就可以实现父级半选的状态了。
const arr = []
res.data.forEach(f=>{
if(!this.$refs.tree.getNode(f.permissionId).childNodes || !this.$refs.tree.getNode(f.permissionId).childNodes.length) {
arr.push(f.permissionId)
}
})
this.$refs.tree.setCheckedKeys(arr)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!