el-select展示el-tree层级数据

在Element UI库中，`el-select` 和 `el-tree` 都是用来展示数据的选择组件和树形结构组件。如果你想将层级数据展示在`el-select`中，并模拟类似树形的效果，通常的做法是在`el-select`选项中嵌套`el-option`，每个`el-option`代表一级节点，如果节点有子节点，则包含另一个下拉列表展示子级。

首先，你需要准备一个数据结构，例如：

{
  id: '1',
  name: '父节点',
  children: [
    {
      id: '1-1',
      name: '子节点1',
      children: [{...}] // 子节点的详细信息...
    },
    {
      id: '1-2',
      name: '子节点2',
      children: [...]
    }
  ]
}

然后，在`el-select`上绑定这个数据作为选项源，可以使用`props`属性：

<template>
  <el-select v-model="selectedValue" :props="{ multiple: true }">
    <el-option
      v-for="(item, index) in treeData"
      :key="index"
      :label="item.name"
      :value="item.id">
      <span>{{ item.name }}</span>
      <!-- 如果有子节点 -->
      <el-select
        v-if="item.children.length > 0"
        v-model="subValues[index]"
        @change="handleSubChange(index)"
        :props="{ multiple: false }">
        <el-option
          v-for="subItem in item.children"
          :key="subItem.id"
          :label="subItem.name"
          :value="subItem.id">
          {{ subItem.name }}
        </el-option>
      </el-select>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: [],
      treeData: ..., // 根据实际数据填充
      subValues: [] // 存储选中的子节点ID数组
    };
  },
  methods: {
    handleSubChange(index) {
      this.subValues[index] = this.$refs.selects[index].value; // 获取当前子节点的选择值
    }
  }
};
</script>

在这个例子中，顶级节点是单选的，如果有子节点，点击会弹出一个二级选择器，可以多选子节点。