el-tree和el-select实现treeselect

El-tree 和 El-select 是 Element UI 中两个常用的组件，它们可以结合使用来实现 TreeSelect（树形选择器）的功能。TreeSelect 是一种下拉列表，它展示了层次结构的数据，并允许用户通过点击节点进行选择。

- `el-tree`：这是一个用于展示层级数据的组件，它通常包含节点信息、父子关系以及展开折叠功能。

- `el-select`：标准的选择框组件，用于从一组选项中让用户做出选择。

要实现 TreeSelect 功能，你可以这样做：

1. **配置 el-tree**：
- 设置 `props` 属性来定义节点的数据结构，包括 `label`, `value`, `children`, 等属性。
- 使用 `load` 或 `default-expand-all` 来动态加载子节点，如果数据需要异步获取。

<el-tree
  :data="treeData"
  :props="props"
  :load="loadNode"
  default-expand-all
></el-tree>

2. **定义 treeData** 和 `props`：
- `treeData` 是根节点数组，每个节点包含 label, value, children (也是一个数组) 等信息。
- `props` 包含了哪些属性会被渲染到视图上。

3. **loadNode** 函数：
- 当点击某个节点时，这个函数会负责请求并返回该节点的子节点数据。

4. **关联 el-select**：
- 创建一个 `el-select` 组件，绑定到树节点的值 (`value-key`) 和标签 (`label-key`) 上。
- 当用户选择一个节点，可以监听 `@change` 事件，更新你的数据模型。

5. **实现 TreeSelect 的双向绑定和状态管理**：
- 保证选中的节点同步到 `el-select` 的 `value`，同时也要处理回显已选择的节点。