element-ui tree树形控件单个选择节点

最新推荐文章于 2025-05-30 09:06:24 发布

你好、阳光

最新推荐文章于 2025-05-30 09:06:24 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： vue element-ui 树形结构 el-tree 单个选择节点

本文链接：https://blog.youkuaiyun.com/weixin_43375606/article/details/87371326

本文介绍了如何在 Element-UI 中实现 Tree 组件单个选择叶子节点的解决方案，提供了 HTML 和 JS 代码示例，并展示了数据结构。适用于遇到类似问题的 Vue 开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui tree控件单个选择节点

element-ui tree怎么选择单个叶子节点的解决方案。实现的效果如下：
在这里插入图片描述
废话不多说，上代码（如下图）：

html：

<div class="recursionTree" v-if="showHierarchy">
    <el-tree :data="data2" :props="defaultProps" ref="tree"
              :expand-on-click-node="false" node-key="id"
              :default-expanded-keys="[bbb]"
              :highlight-current="true" :check-on-click-node="true"
              @node-click="handleNodeClick">
     </el-tree>
   </div>

js：

onChangeBlur () {
      this.showHierarchy = !this.showHierarchy;
      if (this.showHierarchy) { // true 是展开 tree选择项
        this.$nextTick(function () {
          this.$refs.tree.setCurrentKey(this.bbb)
        })
      }
    },
    handleNodeClick(data) {
      this.aaa = data.label;// 当前选中的名称
      this.bbb = data.id; // 当前选中id
      this.showHierarchy = false;