el-select改造成树形下拉，支持模糊查询

最新推荐文章于 2025-06-13 16:06:11 发布

sqwu

最新推荐文章于 2025-06-13 16:06:11 发布

阅读量3.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： element

本文链接：https://blog.csdn.net/qq_42345108/article/details/112274097

将el-select组件改造成树形下拉列表，点击节点即可选中，并新增模糊查询功能。实现了在下拉框中输入关键字进行筛选，详细代码包括子组件SelectTree.vue和父组件的交互，数据来源于后台的树形列表。

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

下拉列表改成树形结构，点击哪个节点，就选中哪个节点，效果如图：

代码：

<el-select
                v-model="name"
                placeholder="请选择"
                clearable
                @clear="handleClear"
              >
                <el-option :value="list" class="select-tree">
                  <el-tree
                    :data="list"
                    highlight-current
                    check-on-click-node
                    default-expand-all
                    :props="{
                      label: 'name',
                      children: 'childList'
                    }"
                    @node-click="handleCheck"
                  />
                </el-option>
              </el-select>

export default {
  data() {
    return {
        name: '',
        code: ''
        list: [],
    }
  },
  methods: {
    // 点击节点
    handleCheck: function(val) {
      this.name = val.name
      this.code = val.code
    },
    // 清空
    handleClear: function(val) {
      if (!val || val === '') {
        this.code = ''
      }
    },
  }
}