@alicd/crui-tree-select-field NPM

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	选择框大小可选值:'small', 'medium', 'large'	Enum	'medium'
shape	选择框形状可选值:'normal', 'arrow-only'	Enum	'normal'
value	（受控）当前值	String/Array<String>	-
defaultValue	（非受控）默认值	String/Array<String>	null
onChange	选中值改变时触发的回调函数签名:Function(value: String/Array, data: Object/Array) => void参数:value: {String/Array} 选中的值，单选时返回单个值，多选时返回数组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	在搜索框中输入时触发的回调函数签名:Function(keyword: String) => void参数:keyword: {String} 输入的关键字	Function	() => {}
multiple	是否支持多选	Boolean	false
treeCheckable	下拉框中的树是否支持勾选节点的复选框	Boolean	false
treeCheckStrictly	下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）	Boolean	false
treeDefaultExpandAll	下拉框中的树是否默认展开所有节点	Boolean	false
treeDefaultExpandedKeys	下拉框中的树默认展开节点key的数组	Array<String>	[]
treeLoadData	下拉框中的树异步加载数据的函数，使用请参考Tree的异步加载数据Demo签名:Function(node: ReactElement) => void参数: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，注意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数据结构

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'
        }]
    }]
}];

walle component react

@alicd/crui-form-item classnames

@infinitebrahmanuniverse/nolb-_alicd @everything-registry/sub-chunk-43 @zalastax/nolb-_alicd @alicd/crui

0.0.9

5 years ago