element 树形控件动态选中子节点自动展开所有祖节点

最新推荐文章于 2024-01-29 23:02:38 发布

原创最新推荐文章于 2024-01-29 23:02:38 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue

知识碎片专栏收录该内容

3 篇文章

订阅专栏

在项目中封装了 Element UI 的 Tree 组件，当外部改变选中子节点时，发现父节点和祖节点不会自动展开。通过监听选中值并使用 setCurrentKey 设置选中状态，再利用 getCurrentNode 获取当前选中节点，并递归调用 expandParents 方法展开所有父节点，解决了这个问题。

element Tree 树形控件动态选中子节点自动展开所有祖节点

项目中将树形控件封装为一个组件，引用时传入选中值，选中树形控件节点，外部改变选中key选中子节点时发现父节点祖节点都不会自动展开，设置了auto-expand-parent也不会。所以采用了以下方式解决：

树形组件代码：

<el-tree
      ref="tree"
      :data="options"
      @node-click="handleNodeClick"
      :highlight-current="true"
      :current-node-key="activeOption"  
      :props="treeProps"
      :node-key="treeProps.id"
      :check-on-click-node="true"
      class="option-tree"
    />

element Tree 树形控件动态选中子节点自动展开所有祖节点

树形组件代码：

<el-tree
      ref="tree"
      :data="options"
      @node-click="handleNodeClick"
      :highlight-current="true"
      :current-node-key="activeOption"  
      :props="treeProps"
      :node-key="treeProps.id"
      :check-on-click-node="true"
      class="option-tree"
    />

注：current-node-key设置选中节点时一定要设置node-key；具体查看element官方说明

监听传入的选中值：

props:{
	selected: {
      type: [String, Number],
      default: () => {
        return ''
      }
    }
},
watch: {
    selected (val) {  
      val && (this.activeOption = val)
      val && this.$refs.tree.setCurrentKey(val)
      const selected = this.$refs.tree.getCurrentNode()
      // 若当前组件有父节点 展开其所有祖宗节点
      if (this.$refs.tree.getNode(selected) && this.$refs.tree.getNode(selected).parent) {
        this.expandParents(this.$refs.tree.getNode(selected).parent)
      }
      this.$emit('filterSelect', selected)
    }
  },
  methods: {
    expandParents (node) {
      // 展开所有祖宗节点
      node.expanded = true
      if (node.parent) {
        this.expandParents(node.parent)
      }
    }
  }

当传入的选中值变化时，判断其存在，存在时使用setCurrentKey方法设置选中值（key）对应的节点的选中状态；然后利用getCurrentNode方法获得当前选中的节点；接着判断当前选中节点是否有父节点，有则传入expandParents方法改变其父节点的展开（expand）状态。
在expandParents方法中先设置传入节点的展开状态，然后判断此节点是否有父节点，有的话递归调用自身，达到展开所有祖节点的目的。