在vue3中写一个树型控件，最上面是选择校区，选择完校区下面出现校区所属的楼栋，选择完楼栋下面显示单元，选择完单元显示楼层，选择完楼层显示5个设备

在 Vue3 中创建一个树状组件通常会涉及到递归数据结构的处理，我们可以利用 `v-for` 指令结合组件嵌套来构建这个功能。下面是一个简化的例子，展示如何从顶级校区开始，然后逐级展开：

<template>
  <div>
    <select v-model="selectedCampus">
      <option v-for="(campus, index) in campuses" :key="index" :value="campus.id">{{ campus.name }}</option>
    </select>

    <transition-group name="fade">
      <child-item
        v-if="selectedCampus"
        :item="selectedCampus"
        :children="selectedCampus.children || []"
      />
    </transition-group>
  </div>
</template>

<script>
export default {
  components: {
    ChildItem: {
      props: ['item', 'children'],
      template: `
        <div>
          <h4>{{ item.name }}</h4>
          <select v-model="selectedBuilding">
            <option v-for="(building, index) in children" :key="index" :value="building.id">{{ building.name }}</option>
          </select>

          <!-- 类似地，为其他层级添加更多 select 元素 -->
          <!-- ... (依此类推直到楼层和设备部分) -->

          <!-- 显示设备部分，这里假设设备是静态的，如果是动态获取，需要通过事件监听来更新 -->
          <div v-for="device, index in deviceList" :key="index">
            <p>设备名称: {{ device.name }}</p>
          </div>
        </div>
      `,
      computed: {
        deviceList() {
          // 这里假设 deviceList 是根据当前选择的楼层动态计算得出的
          return devices.filter(device => device.floorId === this.selectedFloor.id);
        }
      },
    }
  },
  data() {
    return {
      selectedCampus: null,
      campuses: [
        /* 校区数据 */
      ],
      // 省略其他层级的数据初始化...
    };
  }
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>