vben ApiTreeSelect 示例

好的，下面是一个简单的 vben ApiTreeSelect 示例：

<template>
  <vben-api-tree-select
    v-model="selected"
    :api="api"
    :data-key="'id'"
    :label-key="'name'"
    :children-key="'children'"
    :props="{
      lazy: true,
      load: load,
      label: 'name',
      value: 'id',
      children: 'children'
    }"
  />
</template>

<script>
import { ref } from 'vue';
import { Api } from 'vben-admin';

export default {
  setup() {
    const selected = ref();
    const api = new Api('/api/tree');

    const load = async (node) => {
      const res = await api.get({
        params: {
          parentId: node.data.id,
        },
      });

      return res.data;
    };

    return {
      selected,
      api,
      load,
    };
  },
};
</script>

其中，`vben-api-tree-select` 是 vben-admin 中的组件，用于展示树形结构的数据，并且支持异步加载子节点。`api` 是一个 vben-admin 中的 API 实例，用于发送 API 请求。`load` 方法是一个异步方法，用于加载子节点的数据。

在上面的例子中，我们通过 `api` 实例发送 `/api/tree` 的请求来获取根节点的数据。在组件中，我们指定了 `data-key`、`label-key` 和 `children-key` 来告诉组件如何从数据中获取节点的 `id`、`name` 和子节点。

组件的 `props` 中，我们指定了以下属性：

- `lazy`：启用懒加载子节点；
- `load`：指定加载子节点的方法；
- `label`：指定节点的显示文本对应的字段名；
- `value`：指定节点的值对应的字段名；
- `children`：指定子节点对应的字段名。

最后，我们将组件的 `v-model` 绑定到 `selected` 上，用于获取用户选择的节点。