ElementUI tree 解决父节点选中,回显选中所有子节点问题

一、当前面临的问题

  1. 当tree中被选择的节点提交给后端时发现没有带父节点的选项
  2. 向后端提交了 部分子节点 和 部分子节点的父节点 的数据,当回显的时候,该父节点下全部被选中

二、问题解决

  1. 第一个问题的解决方法如下:
this.$refs.tree.getCheckedNodes(false,true).map(i => i.id)

getCheckedNodes 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false

  1. 第二个问题
    setValue(row){
      let _this = this;
      _this.$data.thisRefTree = setInterval(() =>{
        row.menus.split(",").forEach((i) => {
          let node = _this.$refs.tree.getNode(i);
          if(node.isLeaf){
            _this.$refs.tree.setChecked(node, true);
          }
        });
        clearInterval(_this.$data.thisRefTree)
      },200)
    },

我用 setInterval 是因为 tree 有可能没有被初始化,所以此时获取node是没有被定义的。isLeaf(是否为叶子节点 是则true,不是则false)属性,如果为叶子节点就选中。这样利用tree的API就实现了正确的回显效果。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容