基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器

在Vue.js中，你可以使用Element UI的el-select和el-tree组件来创建一个树状下拉选择器。以下是一个简单的示例代码：

<template>
  <div>
    <el-select v-model="selectedValue" placeholder="请选择">
      <el-option
        :value="selectedValue"
        style="height: auto"
      >
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: null,
      treeData: [
        {
          label: '一级 1',
          value: '1',
          children: [
            {
              label: '二级 1-1',
              value: '1-1',
            },
            {
              label: '二级 1-2',
              value: '1-2',
            },
          ],
        },
        {
          label: '一级 2',
          value: '2',
          children: [
            {
              label: '二级 2-1',
              value: '2-1',
            },
            {
              label: '二级 2-2',
              value: '2-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      this.selectedValue = data.value;
    },
  },
};
</script>

在这个示例中，我们创建了一个el-select下拉菜单，并在其中放置了一个el-tree组件。每当用户点击树中的节点时，节点的值就会被赋给selectedValue，从而更新下拉框的显示。这个组合提供了一个树状的下拉选择器，用户可以通过它选择一个值。