el-select嵌套el-tree层级数据

在Element UI库中，`el-select` 和 `el-tree` 都是非常常用的数据展示组件。如果你想在 `el-select` 中选择 `el-tree` 的层级数据，可以按照以下步骤操作：

1. **准备数据**：首先，你需要有一个树状结构的数据，包括节点的ID、名称以及父节点ID。例如：

{
  "data": [
    {
      "id": "1",
      "name": "根节点",
      "children": [
        {
          "id": "2",
          "name": "子节点1",
          "parent": "1"
        },
        {
          "id": "3",
          "name": "子节点2",
          "parent": "1"
        }
      ]
    }
  ]
}

2. **设置el-tree**：在Vue组件中初始化`el-tree`，传入你的层级数据，并监听`node-click`事件处理节点的选择：

<el-tree
  :data="treeData"
  node-key="id"
  default-expand-all
  @node-click="handleNodeClick"
></el-tree>

3. **处理选中节点**：在`handleNodeClick`函数里，你可以获取到用户点击的节点，然后在这个节点下添加或更新`el-select`的数据选项：

methods: {
  handleNodeClick(node) {
    this.selectedNode = node; // 更新选中的节点
    const options = this.getSelectOptions(node); // 根据节点生成select选项
    this.selectOptions = options;
  },
  
  getSelectOptions(node) {
    return node.children.map(child => ({ value: child.id, label: child.name }));
  }
}

4. **配置el-select**：创建一个`el-select`，绑定`v-model`到`selectedNode`，并显示`selectOptions`作为选项列表：

<el-select v-model="selectedNode" placeholder="请选择">
  <el-option
    v-for="(option, index) in selectOptions"
    :key="index"
    :label="option.label"
    :value="option.value"
  ></el-option>
</el-select>