用el-select和el-tree写一个树状下拉框

可以参考以下代码：

<template>
  <div>
    <el-select v-model="selected" placeholder="请选择">
      <el-option
        :key="item.id"
        :label="item.name"
        :value="item.id"
        v-for="item in treeData"
        :disabled="item.children && item.children.length"
      >
        <template v-if="item.children && item.children.length">
          <el-tree :data="item.children" :props="treeProps" accordion>
            <template v-slot="{ node }">
              <span class="el-tree-node__label">{{ node.label }}</span>
            </template>
          </el-tree>
        </template>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      treeData: [
        {
          id: 1,
          name: 'Node 1',
          children: [
            {
              id: 11,
              name: 'Node 1-1',
            },
            {
              id: 12,
              name: 'Node 1-2',
            },
          ],
        },
        {
          id: 2,
          name: 'Node 2',
          children: [
            {
              id: 21,
              name: 'Node 2-1',
              children: [
                {
                  id: 211,
                  name: 'Node 2-1-1',
                },
              ],
            },
            {
              id: 22,
              name: 'Node 2-2',
            },
          ],
        },
      ],
      treeProps: {
        label: 'name',
        children: 'children',
      },
    };
  },
};
</script>

这里使用的是 element-ui 中的 el-select 和 el-tree 组件，通过在 el-option 中嵌套 el-tree 实现树状下拉框。其中，treeData 表示树的数据，treeProps 表示树的属性，selected 表示当前选择的节点。通过设置 el-option 的 disabled 属性来控制只有叶子节点才能选中。