el-select与el-tree结合，实现下拉框树结构，可搜索，自动定位到树结构下的第一个节点处

el-select与el-tree结合，实现下拉框树结构，可搜索，自动定位到树结构下的第一个节点处

**

代码块如下

**

<template>
  <div class="left-medical-structure">
    <div class="top">
      <span>
        病历结构:
      </span>
      <el-select
        ref="stlectTree"
        v-model="treeSelectText"
        placeholder="请选择"
        filterable
        :filter-method="filterMethod"
        size="small"
      >
        <el-option
          :value="treeValue.id"
          :label="treeValue.label"
          style="height: auto;padding:0;"
        >
          <el-tree
            class="ctims-treebox"
            style="font-weight:400;"
            :data="recordDocumentTreeRes"
            :props="defaultProps"
            default-expand-all
            :current-node-key="currentNodeKey"
            node-key="id"
            :expand-on-click-node="false"
            highlight-current
            @node-click="nodeClick"
            :filter-node-method="filterNode"
            ref="tree"
          />
        </el-option>
      </el-select>
    </div>
    <div class="content">
      详细内容
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recordDocumentTreeRes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      treeSelectText: '',
      treeValue: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 初始化默认 当前选中的节点  recordDocumentTreeRes第一组数据children第一个
      currentNodeKey:'',
    };
  },
  watch: {
    recordDocumentTreeRes: {
      handler(newName, oldName) {
        if (newName.length) {
          // 找到recordDocumentTreeRes第一组数据children第一个，然后调this.nodeClick(item) 初始化定位到树形的第一个
          const index0Children0 = newName[0].children[0];
          this.currentNodeKey=index0Children0.id
          this.treeSelectText=index0Children0.label

          this.$nextTick(() => {
            this.$refs['tree'].setCurrentKey(this.currentNodeKey)
          })
        }
      },
      immediate: true,
    }
  },

  methods: {
    // 点击tree节点
    nodeClick(item) {
      console.log('item:', item);
      const { id, label } = item;
      this.treeValue.id = id;
      this.treeValue.label = label;
      this.treeSelectText = label;
      this.$refs.stlectTree.blur();
    },
    // 搜索逻辑
    filterMethod(value) {
      console.log('value:', value);
      this.$refs.tree.filter(value);
    },
    // tree节点过滤
    filterNode(value, data) {
      console.log('value, data:', value, data);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>

<style lang="scss" scoped>
.top {
  height: 40px;
  background-color: #f6f6f6;
  span {
    margin-left: 20px;
    line-height: 40px;
    font-weight: bold;
  }
  .el-select {
    width: 80%;
  }
}
</style>

**

效果图如下：

**

注意：树形结构自动定位到第一个节点用currentNodeKey，与setCurrentKey结合生效