elementui的el-select+el-tree+el-input实现可搜索的下拉树组件

在Element UI中，您可以使用el-select组件结合el-tree和el-input来创建一个可搜索的下拉树组件。以下是一个简单的示例，展示了如何实现这个组件：

<template>
  <el-select v-model="selectedValue" filterable clearable placeholder="请选择">
    <el-input
      v-model="filterText"
      slot="prefix"
      placeholder="输入关键词进行搜索"
      @input="filterTree"
      clearable
    ></el-input>
    <el-tree
      ref="tree"
      :data="treeData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="el-select-tree"
      @node-click="handleNodeClick"
    ></el-tree>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      filterText: '',
      selectedValue: null,
      treeData: [
        // 这里填充您的树形数据结构
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    filterTree() {
      this.$refs.tree.filter(this.filterText);
    },
    handleNodeClick(data) {
      this.selectedValue = data.value;
      this.$refs.tree.setCurrentKey(null);
    }
  }
};
</script>
 
<style>
.el-select-tree .el-tree {
  overflow: auto;
  max-height: 200px;
}
</style>

在这个示例中，我们使用了filterable属性在el-select上来启用搜索功能，同时使用了el-input作为搜索框。在el-tree组件上，我们使用了filter-node-method来定义如何过滤树节点，并且监听了input事件来实时过滤树。通过handleNodeClick方法，我们可以在点击节点时设置选中的值。