ant design pro proformtreeselect 的使用

Ant Design Pro ProFormTreeSelect 是一个交互组件，用于实现多级联动选择框。可以按照树形结构展示数据，并支持多选和搜索。

使用步骤如下：

1. 在你的项目中，安装 antd 和 @ant-design/pro-form 依赖： ```

npm install antd @ant-design/pro-form ```

2. 导入 ProFormTreeSelect 组件和相关依赖： ```javascript

import { ProFormTreeSelect } from '@ant-design/pro-form'; import { request } from 'umi'; ```

3. 在需要使用 ProFormTreeSelect 的地方，传入相应的参数： ```javascript

{

const { data } = await request('/api/category'); return data; }}

fieldProps={{

treeCheckable: true,

showCheckedStrategy: 'SHOW_ALL', }} /> ```

上述代码中，name 属性表示该字段的名称，label 属性表示该字段的标签名称，request 属性表示请求数据的接口地址。

4. 根据需要，可以配置一些额外的属性，例如 fieldProps、options 等： ```javascript

{

const { data } = await request('/api/category'); return data; }}

fieldProps={{

treeCheckable: true,

showCheckedStrategy: 'SHOW_ALL', }}

options={{

initialValue: ['1', '2', '3'], rules: [ {

required: true,

message: '请选择分类', },

], }} /> ```

在 fieldProps 中，可以设置 treeCheckable 属性为 true，开启多选功能；showCheckedStrategy 属性控制展示已选项的方式。

在 options 中，可以设置 initialValue 属性来设置初始值，rules 属性来设置校验规则。

5. 如果需要搜索功能，可以添加一个搜索框： ```javascript

request={async (value) => {

const { data } = await request('/api/category', { params: {

keyword: value, }, });

return data; }} /> ```

上述代码中，添加了 .SearchSelect 后缀，表示开启了搜索框功能。request 函数的参数 value 表示搜索框的值。

6. 根据需要，可以进一步自定义 ProFormTreeSelect 的样式和功能。

以上就是 Ant Design Pro ProFormTreeSelect 的简单使用方法。您可以根据自己的需求，进一步调整和扩展该组件。