在el-select里嵌套树组件

<template>
  <div class="SelectTree">
    <el-select v-model="selectVal" :placeholder="selectVal.label" tabindex="1" class="select" :popper-append-to-body="false" ref="selectFyField">
      <template slot="prefix">
        <i :class="['iconfont','icon-weizhi']"></i>
      </template>
      <el-option :value="selectVal.value" style="height: auto;">
        <el-tree :data="treeData" :props="defaultProps" :default-expand-all="true" node-key="id" :default-expanded-keys="[1]" :expand-on-click-node="false" @node-click="setValue"></el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'SelectTree',
  data() {
    return {
      selectVal: {
        label: '',
        value: '',
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  inject: {
    setInit: {
      default: '',
    },
  },
  created() {
    this.$api.a.b().then((res) => {
      if (res.code === 0) {
        this.treeData = [res.data]
        this.selectVal.label = this.treeData[0].label
        this.selectVal.value = this.treeData[0].id
      }
    })
  },
  methods: {
    setValue(node) {
      this.$emit('func', node)
      this.selectVal.label = node.label
      this.selectVal.value = node.id
      this.$refs.selectFyField.blur()
    },
  },
}
</script>
<style lang="scss">
.SelectTree {
  z-index: 1;
  width: 150px;
  position: relative;
  /deep/.select {
    width: 241px;
    height: 41px;
    .el-input__suffix {
      right: 20px;
    }
  }
  .el-tree-node__label {
    color: #fff;
  }
  /* WebKit browsers */
  input::-webkit-input-placeholder {
    color: #ffffff;
    font-size: 14px;
  }
  /* Mozilla Firefox 4 to 18 */
  input:-moz-placeholder {
     color: #ffffff;
    opacity: 1;
    font-size: 14px;
  }
  /* Mozilla Firefox 19+ */
  input::-moz-placeholder {
     color: #ffffff;
    opacity: 1;
    font-size: 14px;
  }
  /* Internet Explorer 10+ */
  input:-ms-input-placeholder {
     color: #ffffff;
    font-size: 14px;
  }
  .el-input__inner {
    background: transparent !important;
    border: none;
    border-bottom: 1px solid #15d0e7;
  }
  .el-scrollbar {
    background-color: #002c46;
    .el-select-dropdown__list{
      padding: none !important;
    }
  }
  .popper__arrow {
    border-bottom-color: #002c46 !important;
  }
  .el-tree {
    background: #002c46;
  }
  .el-popper[x-placement^='bottom'] .popper__arrow::after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #002c46 !important;
  }
  .el-select-dropdown {
    left: 0 !important;
    border: 1px solid #022832;
    background: #002c46;
  }
  .el-tree-node__content:hover {
    background-color: #0c3a47;
  }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #093946;
  }
  .el-select-dropdown__item {
    width: 100% !important;
    padding: 0;
    margin: 0;
    background: transparent !important;
  }
  .el-input__prefix{
    line-height: 40px;
    .iconfont{
      color: #00CFF1;
    }
  }
}
</style>