Dfws-antd-cascader NPM

东方网升Ant Design版级联选择器组件。

发布

更改package.josn版本
yarn run build
npm publish 注：镜像源需切换回NPM官方源

链接

更新日志

示例

cd example
npm install
npm start

使用之前

该组件依赖于Ant Design组件，使用之前请配置Ant Design。

何时使用

需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

API

<DfwsCascader code={['degree','skill-degree','language']} onChange={onChange} />

参数	说明	类型	默认值
code	级联code	array	-
url	字典服务URL	string	-
cache	字段缓存	boolean	true
expireDay	缓存日期	number	7
allowClear	是否支持清除	boolean	true
autoFocus	自动获取焦点	boolean	false
changeOnSelect	当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示	boolean	false
className	自定义类名	string	-
defaultValue	默认的选中项	string[]	[]
disabled	禁用	boolean	false
displayRender	选择后展示的渲染函数	`(label, selectedOptions) => ReactNode`	`label => label.join(' / ')`
expandTrigger	次级菜单的展开方式，可选 'click' 和 'hover'	string	'click'
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body
loadData	用于动态加载选项，无法与 `showSearch` 一起使用	`(selectedOptions) => void`	-
notFoundContent	当下拉列表为空时显示的内容	string	'Not Found'
options	可选项数据源	object	-
placeholder	输入框占位文本	string	'请选择'
popupClassName	自定义浮层类名	string	-
popupPlacement	浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight`	Enum	`bottomLeft`
popupVisible	控制浮层显隐	boolean	-
showSearch	在选择框中显示搜索框	boolean	false
size	输入框大小，可选 `large` `default` `small`	string	`default`
style	自定义样式	string	-
value	指定选中项	string[]	-
onChange	选择完成后的回调	`(value, selectedOptions) => void`	-
onPopupVisibleChange	显示/隐藏浮层的回调	`(value) => void`	-

showSearch 为对象时，其中的字段：

参数	说明	类型
filter	接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。	`function(inputValue, path): boolean`
matchInputWidth	搜索结果列表是否与输入框同宽	boolean
render	用于渲染 filter 后的选项	`function(inputValue, path): ReactNode`
sort	用于排序 filter 后的选项	`function(a, b, inputValue)`