基于elementUI实现的selectTree，select组件下拉树形结构选择

效果如图：

直接上代码：

<!--
 * @description:树形下拉选择
 * @author: Long 
 * @version: 1.0
 * @updateDate: 2024-7-8
 * @usage:用法
    defaultValue: 默认值
    treeData: 树形数据
    disabled: 是否禁用
    defaultProps: 配置选项
    @clickSelectTree: 点击树形节点时触发
    @clearSelectInput: 清空输入框时触发
    
    <SelectTree v-model="editFormFl.faterClassName" :defaultValue="editFormFl.faterClassCode" :treeData="treeData" :disabled="isEditFl" :defaultProps="defaultProps" @clickSelectTree="handleSelectValueChange" style="width: 100%;"></SelectTree>
-->
<template>
  <div style="display: inline-block;">
    <el-select class="main-select-tree" ref="selectRef" v-model="value" style="width: 100%" clearable @clear="clearSelectInput" :disabled="disabled">
      <el-input style="width: 100%; margin-left: 10px; margin-bottom: 10px" placeholder="输入关键字进行过滤" v-model="filterText" clearable ></el-input>
      <el-option v-for="item in formatData(treeData)" :key="item.value" :label="item.label" :value="item.value" style="display: none" />
      <el-tree class="my_select_Tree" ref="treeRef" :data="treeData" node-key="id" highlight-current :props="defaultProps" @node-click="handleNodeClick" :current-node-key="value" :expand-on-click-node="true" default-expand-all :filter-node-method="filterNode" />
    </el-select>
  </div>
</template>
 
<script>
export default {
  name: "SelectTree",
  props: {
    selectValue: {
      type: String,
      default: "",
    },
    treeData: {
      type: Array,
      default: () => ([])
    },
    // 配置选项
    defaultProps: {
      type: Object,
      default: () => ({ // 属性值为后端返回的对应的字段名
        children: 'children',
        label: 'className',
        value: 'id'
      })
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    //默认选中值
    defaultValue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      filterText: "",
      value: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val);
    },
  },
  mounted() {
    this.initialization()//初始化赋值
  },
  methods: {
    // 初始化赋值
    initialization(){
      var that = this
      this.findNodeById(this.treeData, this.defaultValue, function(node) {
        that.value = node.className;
        console.log('Found node name:', that.value); // 立即查看结果
      });
    },
    //递归方法，获取树形结构中指定id的节点
    findNodeById(tree, id, callback) {  
      for (let node of tree) {  
        if (node.id === id) {  
          // 找到节点，调用回调函数  
          callback(node);  
          return; // 如果只需要找到第一个匹配的节点，可以返回  
        }  
        if (node.children) {  
          // 如果节点有子节点，递归查找  
          this.findNodeById(node.children, id, callback);  
        }  
      }  
    },
    //筛选方法
    filterNode(value, data) {
      if (!value) return true;
      return data.className.indexOf(value) !== -1;
    },
    // 递归遍历数据
    formatData(data) {
      let options = [];
      const formatDataRecursive = (data) => {
        data.forEach((item) => {
          options.push({ label: item.className, value: item.id });
          if (item.children && item.children.length > 0) {
            formatDataRecursive(item.children);
          }
        });
      };
      formatDataRecursive(data);
      return options;
    },
    // 点击事件
    handleNodeClick(node) {
      this.value = node.className;
      this.$refs.selectRef.blur();
      this.$emit("clickSelectTree", node);
    },
    // 清空事件
    clearSelectInput() {
      this.$emit("clickSelectTree", "");
      // 获取 el-tree 实例的引用
      const elTree = this.$refs.treeRef;
      // 将当前选中的节点设置为 null
      elTree.setCurrentKey(null);
    },
  },
};
</script>
 
<style lang="scss" scoped>
.my_select_Tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.my_select_Tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
</style>