树形select选择框

 下拉样式

选中样式

 

组件使用

<input-tree placeholder="请选择总任务节点" :showName="dataPO.generalPlanName" 
    @node-click="handleChangeGeneralPlan"  style="width: 95%" :width="'330px'">
</input-tree>

组件方法

handleChangeGeneralPlan(data) {
    this.dataPO.generalPlanId = data.id;
    this.dataPO.generalPlanName = data.name;
},

树形select具体代码

<template>
  <div class="org-tree-power">
    <el-dropdown trigger="click" ref="inputTreeDropdown" style="width: 100%"                      
        placement="bottom-start">
      <el-input size="mini" readonly v-model="currentVal" :placeholder="placeholder" />
      <el-dropdown-menu slot="dropdown">
        <div class="org-tree-content"
          :style="{width: width,'min-height': '100px','max-height': '360px',  
                    'overflow': 'auto'}">
          <el-tree ref="treeForm" node-key="id" lazy accordion :data="treeData" 
            v-loading="treeLoading" :props="props" :load="loadNode" 
            @node-click="handleNodeClick" :expand-on-click-node="false"/>
         </div>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import {
    pageMasterPlanAsync
  } from '@/api/schedule/masterPlan'

  export default {
    components: {},
    name: "inputTree",
    props: {
      showName: { //展示名称
        type: String,
      },
      placeholder: { //展示名称
        type: String,
        default: '请选择组织'
      },
      width: {
        type: String,
        default: '384px'
      }
    },
    created() {
      this.currentVal = this.showName;
    },
    watch: {
      showName: function (val) {
        this.currentVal = val;
      }
    },
    data() {
      return {
        currentVal: "",
        height: '360px',
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'isLeaf'
        },
        treeData: [],
        treeLoading: true,
      }
    },
    methods: {
      handleNodeClick(data) {
        //点击节点后的回传点击的数据给上级组件
        this.currentVal = data.name;
        this.$emit('node-click', data)
        this.$refs.inputTreeDropdown.hide();
      },

      /* 加载树的子节点 */
      loadNode(node, resolve) {
        this.treeLoading = true;
        pageMasterPlanAsync({
          parentId: node.data.id
        }).then(response => {
          let data = response.data;
          for (let i = 0; i < data.length; i++) {
            data[i].isLeaf = !data[i].hasChildren;
          };
          this.treeLoading = false;
          return resolve(data);
        })
      },
    }
  }

</script>

采用lazy懒加载，数据回显由后台回传name，不显示具体层级 

欢迎讨论分享，知无不言，言无不尽