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

部分实现代码如下

在这里插入代码片

<script>
export default {
  name: '',
  components: {},
  props: {
    defaultProps: { type: Object, default: () => ({}) },
    treeData: { type: Array, required: true, default: () => [] },
  },
  data() {
    return {
      inputValue: '', //树搜索值
  

      expandAll: false, //搜索后全部展开
      refreshTree: true,
      loading: false,
    };
  },
  computed: {},
  methods: {
    // 树模型选中后触发，选中数据赋值到下拉框，判断是否有重复数据，重复的话提示
    handleNodeClick(data, node, item, index, position) {
    操作：自定义
      // 选择后收起下拉菜单
      setTimeout(() => {
        this.$refs[position][index].blur();
      }, 50);
    },
    // 筛选树模型数据；触发父组件搜索接口，修改this.treeData数值即可
    getTreeData() {
      this.loading = true;
     
    },
    // 下拉框出现或隐藏清空输入框值，重新获取所有treeData
    handleVisible() {
      this.inputValue = '';
  
    },
    
   
  },
  watch: {
    // 更新属性
    inputValue: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
         
          // 再次重新请求数据接口即可
        }
      },
      immediate: true,
      deep: true,
    },
  },
 
};
</script>