vue：下拉树结构，el-select实现

最新推荐文章于 2025-06-11 18:58:17 发布

原创最新推荐文章于 2025-06-11 18:58:17 发布 · 4.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 同时被 3 个专栏收录

3 篇文章

订阅专栏

多选框

2 篇文章

订阅专栏

树选择

1 篇文章

订阅专栏

本文介绍如何在Vue.js中使用el-select组件创建一个下拉框，该下拉框展示树形结构的数据。通过隐藏原有选项并自定义样式，结合el-tree组件实现树结构的加载和点击节点的响应。点击树节点时，会将选中值显示在输入框并关闭下拉框，同时清空搜索框内容。实现过程中涉及节点点击回调函数handleNodeClick，用于更新选中值和关闭下拉菜单。

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

下拉框框内显示的选项为树结构加载，效果如下图显示：

在这里插入图片描述
前端html代码

<el-select ref="select" v-model="selectName" placeholder="请选择区域" clearable >
   <div class="put">
     <el-input
       v-model="searchAreaVale"
       placeholder="请输入搜索区域关键字"
       suffix-icon="h-icon-search"
       clearable
       @click="handleIconClick"
     ></el-input>
   </div>
   <el-option key="id" hidden :value="selectVal" :label="selectName" />
   <div class="h-tree">
     <el-tree
       style="padding: 0px 10px 10px 0px"
       :data.sync="optionsMetaAll"
       :props="defaultProps"
       node-key="code"
       parent-key="parentId"
       simple-data
       lazy
       :load="loadTree"
       @node-click="handleNodeClick"
     ></el-tree>
   </div>
 </el-select>

主要实现思路，通过 hidden 去隐藏下来框已有的选项卡，然后再去自定义自己的样式，点击树结构的节点，或者其他操作想收回下拉框时候，调用el-select的handleClose（）函数，即可收回下拉框，我自己的业务逻辑为点击树节点，选中即可收回

/**此操作的回调为树结构的api，不明白可以查看树结构api*/
handleNodeClick(data, node) {
   if (node.isLeaf == false) {
   	return
   }
   /**
   * 将选中的值显示到下拉选择框上，并收回下拉框
   */
   this.selectVal = data.name // select绑定值为点击的选项的value
   this.selectName = data.name // input中显示值为label
   this.treeFilter = '' // 点击后搜索框清空
   this.searchAreaVale = '' //清空搜索项
   this.$refs.select.handleClose() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
},