category: Components type: UI Views component: Form chinese: 级联选择框 english: CascaderSelectField source: next-cascader-select

级联选择框，next-cascader-select + FormItem 的功能整和，同时支持了 x-bind 双向绑定， rules 规则配置，配置表单 name 属性

API

| 参数 | 说明 | 类型 | 默认值 | | -------------------- | ---------------- | ----------------------- | -------------------------- | | 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, extra: Object) => void参数:value: {String/Array} 选中的值，单选时返回单个值，多选时返回数组data: {Object/Array} 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点extra: {Object} 额外参数extra.selectedPath: {Array} 单选时选中的数据的路径extra.checked: {Boolean} 多选时当前的操作是选中还是取消选中extra.currentData: {Object} 多选时当前操作的数据extra.checkedData: {Array} 多选时所有被选中的数据extra.indeterminateData: {Array} 多选时半选的数据 | Function | - | | placeholder | 选择框占位符 | String | - | | disabled | 是否禁用 | Boolean | false | | hasArrow | 是否显示右侧的箭头 | Boolean | true | | hasClear | 是否显示清空按钮，该按钮可以清空当前选中的值，该属性仅在单选模式下有效 | Boolean | false | | dataSource | 数据源，结构可参考下方说明 | Array<Object> | [] | | defaultVisible | 初始下拉框是否显示 | Boolean | false | | initValue | 默认值 | any | null | | defaultExpandedValue | 默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置 | Array<String> | - | | expandTrigger | 展开触发的方式可选值:'click', 'hover' | Enum | 'click' | | multiple | 是否多选 | Boolean | false | | changeOnSelect | 是否选中即发生改变, 该属性仅在单选模式下有效 | Boolean | false | | canOnlyCheckLeaf | 是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效 | Boolean | false | | checkStrictly | 父子节点是否选中不关联 | Boolean | false | | labelWidth | 文字区域宽度，当文字超过宽度时，结尾会以省略号显示，默认值为文字实际宽度 | String/Number | - | | showItemCount | 每一列展示的个数 | String/Number | 6 | | displayRender | 选择框单选时展示结果的函数签名:Function(label: Array) => ReactNode参数:label: {Array} 选中路径的文本数组返回值:{ReactNode} 渲染在选择框中的内容 | Function | label => label.join(' / ') | | popupClassName | 下拉框样式自定义类名 | String | - | | container | 下拉框挂载的容器节点 | String/Function | - | | loadData | 异步加载数据函数签名:Function(data: Object) => void参数:data: {Object} 当前点击异步加载的数据 | Function | - | | label | label 标签的文本 | ReactNode | - | | labelCol | label 标签布局，通 <Col> 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效 | Object | - | | help | 提示信息，如不设置，则会根据校验规则自动生成. 如果设置会受控（ps: 可以利用这点自定义错误位置,详细看demo自定义错误) | ReactNode | - | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成可选值:'''success'(成功)'error'(失败)'loading'(校验中) | Enum | - | | hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标, 目前只有Input支持 | Boolean | false | | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | Object | - | | extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面 | ReactNode | - | | showValidateType | 应用于Field 类元素后，指定其展示错误的方式，可选值有 help、tooltip 两种| String | help | | name | walle 模式下才支持 可以配合表单Form 收集表单元素的数据，要求表单必须指定 field 属性 | String | '' | | rules | walle 模式下才支持 配置表单规则，可以配置多个规则，可参考：async-validator，注意Form 表单必须配置field 属性才会生效 | Array | null | | x-bind | walle 模式下才支持 双向绑定某一个变量 | state | null |