koacms（十三）element ui 树形下拉选择封装

直接上代码，这个用的地方也会比较多

<!-- 
 *  用法
    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;" class="w-100">
      <el-select class="main-select-tree d-flex" ref="selectRef" v-model="value" style="width: 100%" clearable @clear="clearSelectInput" :disabled="disabled">
        <div class="my-10 px-20">
          <el-input class="box-border flex-1" placeholder="输入关键字进行过滤" v-model="filterText" clearable ></el-input>
        </div>
        
        <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  box-border " 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: "TreeSelect",
    props: {
      selectValue: {
        type: [String,Number],
        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  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>