何时使用
展示基本的单选用法。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dataSource | 数据源，结构可参考下方说明 | Array<Object> | [] |
| defaultValue | （非受控）默认值 | String/Array<String> | null |
| value | （受控）当前值 | String/Array<String> | - |
| 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 | - |
| defaultExpandedValue | （非受控）默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置 | Array<String> | - |
| expandedValue | （受控）当前展开值 | Array<String> | - |
| expandTriggerType | 展开触发的方式 可选值: 'click', 'hover' | Enum | 'click' |
| onExpand | 展开时触发的回调函数 签名: Function(expandedValue: Array) => void 参数: expandedValue: {Array} 各列展开值的数组 | Function | - |
| useVirtual | 是否开启虚拟滚动 | Boolean | false |
| multiple | 是否多选 | Boolean | false |
| canOnlySelectLeaf | 单选时是否只能选中叶子节点 | Boolean | false |
| canOnlyCheckLeaf | 多选时是否只能选中叶子节点 | Boolean | false |
| checkStrictly | 父子节点是否选中不关联 | Boolean | false |
| listStyle | 每列列表样式对象 | Object | - |
| listClassName | 每列列表类名 | String | - |
| itemRender | 每列列表项渲染函数 签名: Function(data: Object) => ReactNode 参数: data: {Object} 数据 返回值: {ReactNode} 列表项内容 | Function | item => item.label |
| loadData | 异步加载数据函数 签名: Function(data: Object, source: Object) => void 参数: data: {Object} 当前点击异步加载的数据 source: {Object} 当前点击数据，source是原始对象 | Function | - |
const dataSource = [{ value: '2974', label: '西安', children: [ { value: '2975', label: '西安市', disabled: true }, { value: '2976', label: '高陵县', checkboxDisabled: true }, { value: '2977', label: '蓝田县' }, { value: '2978', label: '户县' }, { value: '2979', label: '周至县' }, { value: '4208', label: '灞桥区' }, { value: '4209', label: '长安区' }, { value: '4210', label: '莲湖区' }, { value: '4211', label: '临潼区' }, { value: '4212', label: '未央区' }, { value: '4213', label: '新城区' }, { value: '4214', label: '阎良区' }, { value: '4215', label: '雁塔区' }, { value: '4388', label: '碑林区' }, { value: '610127', label: '其它区' } ] }];
数组中 Item 的自定义属性也会被透传到 onChange 函数的 data 参数中。