vue写一个树形组件的下拉框

下面是一个基于 Vue 的树形组件下拉框的示例代码：

<template>
  <div class="tree-select">
    <div class="tree-select__input" @click="toggleDropdown">
      <div class="tree-select__input-text">{{ selectedNode.name }}</div>
      <div class="tree-select__input-icon"></div>
    </div>
    <transition name="tree-select__dropdown">
      <div v-if="isDropdownVisible" class="tree-select__dropdown">
        <ul>
          <li v-for="node in treeData" :key="node.id">
            <div class="tree-select__dropdown-item" @click="selectNode(node)">
              <div class="tree-select__dropdown-item-text">{{ node.name }}</div>
              <div v-if="node.children" class="tree-select__dropdown-item-icon"></div>
            </div>
            <tree-select-dropdown v-if="node.children && node.id === selectedNode.id" :tree-data="node.children" @select="selectNode"></tree-select-dropdown>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'TreeSelect',
  props: {
    treeData: {
      type: Array,
      required: true
    },
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isDropdownVisible: false
    }
  },
  computed: {
    selectedNode() {
      return this.value
    }
  },
  methods: {
    toggleDropdown() {
      this.isDropdownVisible = !this.isDropdownVisible
    },
    selectNode(node) {
      this.$emit('select', node)
      this.isDropdownVisible = false
    }
  },
  components: {
    TreeSelectDropdown: {
      name: 'TreeSelectDropdown',
      props: {
        treeData: {
          type: Array,
          required: true
        }
      },
      methods: {
        selectNode(node) {
          this.$emit('select', node)
        }
      }
    }
  }
}
</script>

<style scoped>
.tree-select {
  position: relative;
}

.tree-select__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
}

.tree-select__input-text {
  flex: 1;
}

.tree-select__input-icon {
  width: 16px;
  height: 16px;
  background: url('https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/tree-icon.png');
  background-position: -40px -80px;
}

.tree-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
}

.tree-select__dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  cursor: pointer;
}

.tree-select__dropdown-item:hover {
  background: #f0f0f0;
}

.tree-select__dropdown-item-text {
  flex: 1;
}

.tree-select__dropdown-item-icon {
  width: 16px;
  height: 16px;
  background: url('https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/tree-icon.png');
  background-position: -40px -80px;
}
</style>

在上面的示例代码中，`TreeSelect` 组件是树形下拉框的主组件。它包含一个下拉框输入框和一个下拉框菜单，当用户点击输入框时，下拉框菜单将展开或收起。下拉框菜单中的每个菜单项都是一个 `TreeSelectDropdown` 子组件，它可以递归地渲染树形结构。

在 `TreeSelect` 组件中，我们使用 `isDropdownVisible` 状态来控制下拉框菜单的显示与隐藏。当用户点击输入框时，我们将 `isDropdownVisible` 设置为 `true`，下拉框菜单就会显示出来。当用户点击菜单项时，我们会向上传递一个 `select` 事件，同时将 `isDropdownVisible` 设置为 `false`，下拉框菜单就会隐藏起来。

在 `TreeSelectDropdown` 组件中，我们使用 `v-if` 指令来判断当前节点是否有子节点，如果有，就递归地渲染出子节点的下拉框菜单。当用户点击菜单项时，我们同样会向上传递一个 `select` 事件，这样就可以让父组件更新当前选中的节点了。

最后，我们还定义了一些样式规则，用来美化树形下拉框的外观。