美文网首页
Tree树形控件bug

Tree树形控件bug

作者: 上善若水zyz601 | 来源:发表于2019-12-31 09:54 被阅读0次

    主要也是记录下。
    最近在使用el-tree组件时遇到个问题。在lazy、show-checkbox模式下,设置default-checked-keys后,点击展开竟然出bug了。
    来龙去脉是这样的:
    我有一个父级节点,它有三个子节点,父级节点点击后会加载这三个子级节点;假设三个子节点分别为1、2、3,当我default-checked-keys = [1,2];即应该默认选中1和2,但是实际效果却是子级全部被选中。
    可能很多人会认为我是不是有其他配置导致,比如说设置了check-on-click-node=true、node-click方法有处理等等,其实都是没有的,所以我自己也很纳闷。于是就断点查了下default-checked-keys里存入的值,确实也只有1和2这两个key值,所以也就彻底无解了。。
    说说解决办法吧。
    另辟蹊径:既然在点击展开时会出问题那就监听一下node-expand这个方法吧;节点被展开时触发的事件,共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

    nodeExpand(data,node){
            let _this = this;
            if(!node.checked&&!node.indeterminate){//解决el-tree组件的bug
              setTimeout(()=>{
                for(let i in node.childNodes){
                  if(_this.defaultCheckedKeys.indexOf(node.childNodes[i].data.value) == -1){
                    node.childNodes[i].checked = false
                  }else {
                    node.childNodes[i].checked = true;
                    node.indeterminate = true
                  }
                }
              },100)
            }
          },
    

    在节点对应的 Node上找到子级并分别遍历,利用checked属性重新设置正确的选中状态。虽然不是很优雅但也是一种解决办法吧。注意还要有个100ms延迟,因为数据是在懒加载之后才能拿到的,不然这样修改也是没效果的。

    相关文章

      网友评论

          本文标题:Tree树形控件bug

          本文链接:https://www.haomeiwen.com/subject/sffboctx.html