elementui下拉樹形結構【完美實現】

在用 elementui 開發項目的時候，在進行下拉選擇的時候，由於下拉的選項中，存在‘父’‘子’上下級的關系，所以想用下拉樹來解決。

通過百度 elementui 下拉樹，有很多版本，但是總會有一些問題。最終自己寫了一個，能夠完美實現下拉樹的功能。

廢話少說，上代碼：

<template>
  <div class="app-container">
    <el-select class="main-select-tree" ref="selectTree" v-model="value"  style="width: 560px;">
      <el-option v-for="item in formatData(datas)" :key="item.value" :label="item.label" :value="item.value" style="display: none;" />      
      <el-tree class="main-select-el-tree" ref="selecteltree" 
        :data="datas"
        node-key="id" 
        highlight-current  
        :props="defaultProps"
        @node-click="handleNodeClick"
        :current-node-key="value"
        :expand-on-click-node="expandOnClickNode"
        default-expand-all />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 6,
      expandOnClickNode: true,
      options:[],
      datas: [{
        id: 1,
        label: '雲南',
        children: [{
          id: 2,
          label: '昆明',
          children: [
            {id: 3,label: '五華區',children:[{id: 8,label: '北辰小區'}]},
            {id: 4,label: '盤龍區'}
          ]
        }]
      }, {
        id: 5,
        label: '湖南',
        children: [
          {id: 6,label: '長沙'},
          {id: 7,label: '永州'}
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 四級菜單
    formatData(data){
      let options = [];
      data.forEach((item,key) => {
        options.push({label:item.label,value:item.id});
        if(item.children){
          item.children.forEach((items,keys) => {
            options.push({label:items.label,value:items.id});
            if(items.children){
              items.children.forEach((itemss,keyss) => {
                options.push({label:itemss.label,value:itemss.id});
                if(itemss.children){
                  itemss.children.forEach((itemsss,keysss) => {
                    options.push({label:itemsss.label,value:itemsss.id});
                  });
                }
              });
            }
          });
        }
      });
      return options;
    },
    handleNodeClick(node){
      this.value = node.id;
      this.$refs.selectTree.blur();
    }
  }
}
</script>
<style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
</style>

效果截圖：

此功能的特點：巧妙的利用了select組件的渲染方式，通過隱藏options來動態計算下拉高度，通過模型同步實現了select組件渲染，不必賦值，同步模型。