el-select 结合树形菜单

`el-select` 是 Element UI 中的一个组件，它是一个下拉选择框，常用于展示一系列选项让用户进行选择。当需要结合树形结构数据时，可以将 `el-select` 和 `el-tree`（Element UI 的树状组件）结合起来使用。

在 Vue 项目中，你可以这样做：

1. 首先，在你的数据模型中定义一个树形结构的数据数组，每个节点包含一个 `label` 属性用于显示文本，以及一个 `children` 数组表示其子节点。

data() {
  return {
    treeData: [
      { label: '父节点1', children: [] },
      { label: '父节点2', children: [{ label: '子节点2-1' }] }
    ]
  };
}

2. 使用 `el-tree` 组件渲染树形结构，并传递 `treeData` 到它的 `data` 或者 `props` 属性里。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  methods: {
    handleNodeClick(node) {
      // 当用户点击节点时，这里可以根据 node 对应的值更新 el-select 的选项
      this.selectOptions = node.label;
    }
  },
  computed: {
    defaultProps() {
      return {
        children: '__children__', // 标识子节点
        label: 'label'           // 标识节点文本
      };
    },
    selectOptions() {
      return this.treeData.filter(item => !item.children).map(item => item.label);
    }
  }
};
</script>

在这个例子中，`selectOptions` 计算属性会获取所有叶子节点（没有子节点的节点），作为 `el-select` 的选项源。