@alicd/crui-tree-select-field
Version:
树形下拉框
103 lines (94 loc) • 14.1 kB
Markdown
category: Components
type: UI Views
component: Form
chinese: 树形下拉框
english: TreeSelectField
source: next-tree-select
类似 SelectField 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
## API
### TreeSelectField
| 参数 | 说明 | 类型 | 默认值 |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------- |
| prefix | 样式类名的品牌前缀 | String | 'next-' |
| className | 自定义类名 | String | - |
| style | 自定义内联样式 | Object | - |
| size | 选择框大小<br><br>**可选值**:<br>'small', 'medium', 'large' | Enum | 'medium' |
| shape | 选择框形状<br><br>**可选值**:<br>'normal', 'arrow-only' | Enum | 'normal' |
| value | （受控）当前值 | String/Array<String> | - |
| defaultValue | （非受控）默认值 | String/Array<String> | null |
| onChange | 选中值改变时触发的回调函数<br><br>**签名**:<br>Function(value: String/Array, data: Object/Array) => void<br>**参数**:<br>_value_: {String/Array} 选中的值，单选时返回单个值，多选时返回数组<br>_data_: {Object/Array} 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点 | Function | () => {} |
| children | 树节点 | ReactNode | - |
| placeholder | 选择框占位符 | String | - |
| disabled | 是否禁用 | Boolean | false |
| hasArrow | 是否显示右侧的箭头 | Boolean | true |
| hasClear | 是否显示清空按钮，该按钮可以清空当前选中的值，该属性仅在单选模式下有效 | Boolean | false |
| autoWidth | 下拉框是否与选择器对齐 | Boolean | false |
| dataSource | 数据源，该属性优先级高于 children | Array<Object> | - |
| defaultVisible | 初始下拉框是否显示 | Boolean | false |
| showSearch | 是否显示搜索框 | Boolean | false |
| onSearch | 在搜索框中输入时触发的回调函数<br><br>**签名**:<br>Function(keyword: String) => void<br>**参数**:<br>_keyword_: {String} 输入的关键字 | Function | () => {} |
| multiple | 是否支持多选 | Boolean | false |
| treeCheckable | 下拉框中的树是否支持勾选节点的复选框 | Boolean | false |
| treeCheckStrictly | 下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联） | Boolean | false |
| treeDefaultExpandAll | 下拉框中的树是否默认展开所有节点 | Boolean | false |
| treeDefaultExpandedKeys | 下拉框中的树默认展开节点key的数组 | Array<String> | \[] |
| treeLoadData | 下拉框中的树异步加载数据的函数，使用请参考[Tree的异步加载数据Demo](http://fusion-demo.alibaba-inc.com/components?type=next&themeId=next&name=tree#tree-4)<br><br>**签名**:<br>Function(node: ReactElement) => void<br>**参数**:<br>_node_: {ReactElement} 被点击展开的节点 | Function | - |
| popupClassName | 下拉框样式自定义类名 | String | - |
| container | 下拉框挂载的容器节点 | String/Function | - |
| label | label 标签的文本 | ReactNode | - |
| labelCol | label 标签布局，通 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效 | Object | - |
| compact | 多选状态（`multiple` 为 `true`）时，以单行形式展示已选项，用来避免空间较窄且已选项较多时出现的样式问题。 | `boolean` | `false` |
| help | 提示信息，如不设置，则会根据校验规则自动生成. 如果设置会受控（ps: 可以利用这点自定义错误位置,详细看demo自定义错误) | ReactNode | - |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成**可选值**:'''success'(成功)'error'(失败)'loading'(校验中) | Enum | - |
| hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标, 目前只有Input支持 | Boolean | false |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | Object | - |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面 | ReactNode | - |
| inputStyle | 表单输入框自定义内联样式 | Object/String | null |
| showValidateType | 应用于Field 类元素后，指定其展示错误的方式，可选值有 `help`、`tooltip` 两种| String | `help` |
| name | `walle 模式下才支持` 可以配合表单Form 收集表单元素的数据，要求表单必须指定 field 属性 | String | '' |
| rules | `walle 模式下才支持` 配置表单规则，可以配置多个规则，可参考：[async-validator](https://github.com/yiminghe/async-validator#rules)，注意Form 表单必须配置field 属性才会生效 | Array | null |
| x-bind | `walle 模式下才支持` 双向绑定某一个变量 | state | null |
### TreeSelect.Node
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ---------------------------- | --------- | ----- |
| prefix | 样式类名的品牌前缀 | String | - |
| className | 自定义类名 | String | - |
| style | 自定义内联样式 | Object | - |
| children | 树节点 | ReactNode | - |
| label | 节点文本内容 | ReactNode | '---' |
| value | 节点值，全局唯一，必须设置 | String | - |
| key | 键，必须设置 | String | - |
| selectable | 单独设置是否支持选中，覆盖Tree的selectable | Boolean | - |
| disabled | 是否禁止节点响应 | Boolean | false |
| disableCheckbox | 是否禁止勾选节点复选框 | Boolean | false |
| isLeaf | 是否是叶子节点，设置loadData时生效 | Boolean | false |
### dataSource数据结构
```js
const dataSource = [{
label: '服装',
value: '1',
selectable: false,
children: [{
label: '男装',
value: '2',
children: [{
label: '外套',
value: '4',
disableCheckbox: true
}, {
label: '夹克',
value: '5',
disabled: true
}]
}, {
label: '女装',
value: '3',
children: [{
label: '裙子',
value: '6'
}]
}]
}];
```