Vue 实现树形下拉选择框

这是elemen ui做法  element plus有成型的组件

<el-select 
  class="main-select-tree" 
  ref="selectTree" 
  v-model="selectValue" 
  style="width: 300px;" 
  name='独爱那杯cc'>
    <el-option style="height: 100%; padding: 0;" value=""> //不可缺少
      <el-tree 
      class="main-select-el-tree" 
      ref="selectelTree" 
      :data="cityData" //data负责数据的绑定(数据通常是树形数组的形式)
      :props='treeProps' //props负责数据的传递 
      @node-click="handleNodeClick" //node-click则负责点击节点时的操作
      :expand-on-click-node="expandOnClickNode" //是否只有点击箭头列表才收缩 
      highlight-current 
      default-expand-all
      style="font-weight: normal;" />
    </el-option>
  </el-select>
  <script>
    export default {
      data() {
        return {
          selectValue: '',
          expandOnClickNode: true,
          options: [],
          treeProps: {
            children: 'children',
            label: 'label'
          },
          cityData: [{
            id: 1,
            label: '北京',
            children: [
              { id: 2, label: '海淀区' },
              { id: 3, label: '朝阳区' },
              { id: 4, label: '海淀区' },
              { id: 5, label: '海淀区' },
            ]
          }]
        }
      },

      methods: {
        // 点击节点时的回调
        handleNodeClick(node) {
          this.selectValue = node.label;
          this.$refs.selectTree.blur();
          console.log(node.label);
        }
      }
    }
  </script>