elementUI el-tree 初始化数组中如果有父ID将会关联所有子节点

后台返回[46,64,49,79]数组,但是将该输出给el-tree,因为数组里面有父节点ID(46),所以父节点下面的所有子节点都被勾选了
图片描述

通过设置check-strictly可以解决初始化勾选问题,但是传给后台又需要所选子节点的父节点ID,这个该怎么解决,就大神帮忙!!!!

我是这样获取所选父子节点ID

this.$refs.tree.getHalfCheckedKeys(), this.$refs.tree.getCheckedKeys()
阅读 5.8k
1 个回答

想了一个办法,但是感觉不是最好的办法,处理方式如下:
通过递归遍历所有的子节点,然后根据后台传过来的所选节点id匹配,判断该遍历的节点id和后台所选id比较,比较为true就会进行setChecked操作
1、在页面生命周期的created事件中,执行菜单树的根节点遍历方法

created() {
    this.foreachMenuRoot()
},

2、遍历有两个坑
2.1、页面初始化的时候this.$refs.tree还是undefined未定义
2.2、当created将页面元素加载完成后this.$refs.tree.children菜单树还没加载完,所以也是undefined未定义(ps:请求后台那数据会有一定的延迟,树的数据加载过程也会有一定的延迟)

foreachMenuRoot() {
      // 递归勾选菜单树
      const _this = this
      // 由于目前页面created加载的时候this.$refs.tree树还未加载完成,所以非空判断
      if (this.$refs.tree !== undefined && this.$refs.tree.children !== undefined && this.$refs.tree.children !== null) {
        this.$refs.tree.children.forEach(function(node) {
          if (_this.form.menuIds.indexOf(node.id) !== -1) {
            _this.$refs.tree.setChecked(node.id, true, false)
          }
          if (node.children !== undefined && node.children !== null && node.children.length > 0) {
            _this.whileMenuIdsCheckedElTree(node)
          }
        })
        this.formLoading = false
      } else {
        // 由于数据未能及时加载完成,做一个定时循环去执行
        setTimeout(() => {
          _this.foreachMenuRoot()
        }, 3000)
      }
    },

3、递归遍历根节点的叶子节点

whileMenuIdsCheckedElTree(node) {
      const _this = this
      node.children.forEach(function(cnode) {
        if (_this.form.menuIds.indexOf(cnode.id) !== -1) {
          _this.$refs.tree.setChecked(cnode.id, true, false)
        }
        if (cnode.children !== undefined && cnode.children !== null && cnode.children.length > 0) {
          _this.whileMenuIdsCheckedElTree(cnode)
        }
      })
    }

自己不是专业的前端工程师,一直都是后端开发,如果有更好的思路和想法欢迎一起探讨

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题