Cascader 级联

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

  • 适用于从一组具有关联性的数据集合中进行选择的交互方式。

  • 由于子集目录隐藏，级联是一种节约屏幕空间的有效方法。

  • 级别数因业务需求而定，建议不超过5级。

  • 级联多用于表单场景，可以独立在页面中使用，也可以与其他元素组合使用，如级联选择。

API

Cascader

参数说明类型默认值
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是否开启虚拟滚动Booleanfalse
multiple是否多选Booleanfalse
canOnlySelectLeaf单选时是否只能选中叶子节点Booleanfalse
canOnlyCheckLeaf多选时是否只能选中叶子节点Booleanfalse
checkStrictly父子节点是否选中不关联Booleanfalse
listStyle每列列表样式对象Object-
listClassName每列列表类名String-
itemRender每列列表项渲染函数签名:Function(data: Object) => ReactNode参数:data: {Object} 数据返回值:{ReactNode} 列表项内容Functionitem => item.label
loadData异步加载数据函数签名:Function(data: Object, source: Object) => void参数:data: {Object} 当前点击异步加载的数据source: {Object} 当前点击数据Function-
<!— api-extra-start —>### dataSource数据结构#
  1. 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 参数中。<!— api-extra-end —>## ARIA and KeyBoard#
按键说明
Left Arrow获取同级当前项前一项焦点
Right Arrow获取同级当前项后一项焦点
Tab进入当前项的子元素，并获取第一个子元素为焦点
Esc返回当前项的父元素并获取焦点
SPACE选择当前项

代码示例

基本使用

展示基本的单选用法。

Cascader 级联 - 图1

查看源码在线预览

  1. import { Cascader } from '@alifd/next';
  3. class Demo extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  7.         this.state = {
  8.             label: '',
  9.             data: []
  10.         };
  12.         this.handleChange = this.handleChange.bind(this);
  13.     }
  15.     componentDidMount() {
  16.         fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
  17.             .then(response => response.json())
  18.             .then(data => {
  19.                 data[1].disabled = true;
  20.                 this.setState({ data });
  21.             })
  22.             .catch(e => console.log(e));
  23.     }
  25.     handleChange(value, data, extra) {
  26.         console.log(value, data, extra);
  28.         this.setState({
  29.             label: extra.selectedPath.map(d => d.label).join(' / ')
  30.         });
  31.     }
  33.     render() {
  34.         return (
  35.             <div>
  36.                 <div className="cascader-value">Select: {this.state.label}</div>
  37.                 <Cascader dataSource={this.state.data} onChange={this.handleChange} />
  38.             </div>
  39.         );
  40.     }
  41. }
  43. ReactDOM.render(<Demo />, mountNode);
  1. .cascader-value {
  2.     margin-bottom: 10px;
  3.     font-size: 14px;
  4.     color: #666;
  5. }

展开触发行为

展示可通过expandTriggerType来设置不同的展开触发行为，支持click和hover，默认值为click。

Cascader 级联 - 图2

查看源码在线预览

  1. import { Radio, Cascader } from '@alifd/next';
  3. const RadioGroup = Radio.Group;
  5. class Demo extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  9.         this.state = {
  10.             triggerType: 'click',
  11.             data: []
  12.         };
  14.         this.handleChange = this.handleChange.bind(this);
  15.         this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);
  16.     }
  18.     componentDidMount() {
  19.         fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
  20.             .then(response => response.json())
  21.             .then(data => this.setState({ data }))
  22.             .catch(e => console.log(e));
  23.     }
  25.     handleChange(value, data, extra) {
  26.         console.log(value, data, extra);
  27.     }
  29.     handleTriggerTypeChange(triggerType) {
  30.         this.setState({
  31.             triggerType
  32.         });
  33.     }
  35.     render() {
  36.         return (
  37.             <div>
  38.                 <div className="trigger-check">
  39.                     Expand trigger type:
  40.                     <RadioGroup dataSource={['click', 'hover']} value={this.state.triggerType} onChange={this.handleTriggerTypeChange} />
  41.                 </div>
  43.                 <Cascader expandTriggerType={this.state.triggerType} dataSource={this.state.data} onChange={this.handleChange} />
  44.             </div>
  45.         );
  46.     }
  47. }
  49. ReactDOM.render(<Demo />, mountNode);
  1. .trigger-check {
  2.     margin-bottom: 10px;
  3.     font-size: 14px;
  4.     color: #666;
  5. }
  7. .trigger-check .next-radio-group {
  8.     margin-left: 10px;
  9. }

多选

展示基本的多选用法。

Cascader 级联 - 图3

查看源码在线预览

  1. import { Cascader } from '@alifd/next';
  3. class Demo extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  7.         this.state = {
  8.             label: '',
  9.             data: []
  10.         };
  12.         this.handleChange = this.handleChange.bind(this);
  13.     }
  15.     componentDidMount() {
  16.         fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
  17.             .then(response => response.json())
  18.             .then(data => {
  19.                 data[1].disabled = true;
  20.                 data[2].checkboxDisabled = true;
  21.                 this.setState({ data });
  22.             })
  23.             .catch(e => console.log(e));
  24.     }
  26.     handleChange(value, data, extra) {
  27.         console.log(value, data, extra);
  29.         this.setState({
  30.             label: data.map(d => d.label).join(', ')
  31.         });
  32.     }
  34.     render() {
  35.         return (
  36.             <div>
  37.                 <div className="cascader-value">Select: {this.state.label}</div>
  38.                 <Cascader multiple dataSource={this.state.data} onChange={this.handleChange} />
  39.             </div>
  40.         );
  41.     }
  42. }
  44. ReactDOM.render(<Demo />, mountNode);
  1. .cascader-value {
  2.     width: 500px;
  3.     margin-bottom: 10px;
  4.     font-size: 14px;
  5.     color: #666;
  6. }

设置是否只能选择叶子项

展示受控单选以及是否只能选择叶子项的用法。

Cascader 级联 - 图4

查看源码在线预览

  1. import { Checkbox, Cascader } from '@alifd/next';
  3. class Demo extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  7.         this.state = {
  8.             value: null,
  9.             canOnlySelectLeaf: false,
  10.             data: []
  11.         };
  13.         this.handleCheck = this.handleCheck.bind(this);
  14.         this.handleChange = this.handleChange.bind(this);
  15.     }
  17.     componentDidMount() {
  18.         fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
  19.             .then(response => response.json())
  20.             .then(data => this.setState({ data, value: '2975' }))
  21.             .catch(e => console.log(e));
  22.     }
  24.     handleCheck() {
  25.         this.setState({
  26.             canOnlySelectLeaf: !this.state.canOnlySelectLeaf,
  27.             value: null
  28.         });
  29.     }
  31.     handleChange(value, data, extra) {
  32.         console.log(value, data, extra);
  34.         this.setState({
  35.             value
  36.         });
  37.     }
  39.     render() {
  40.         return (
  41.             <div className="control-single-demo">
  42.                 <label className="leaf-check">
  43.                     <Checkbox value={this.state.canOnlySelectLeaf} onChange={this.handleCheck} />
  44.                     <span className="leaf-text">Enable canOnlySelectLeaf</span>
  45.                 </label>
  46.                 <Cascader canOnlySelectLeaf={this.state.canOnlySelectLeaf} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />
  47.             </div>
  48.         );
  49.     }
  50. }
  52. ReactDOM.render(<Demo />, mountNode);
  1. .control-single-demo .leaf-check {
  2.     display: block;
  3.     margin-bottom: 10px;
  4. }
  6. .control-single-demo .leaf-text {
  7.     display: inline-block;
  8.     margin-left: 10px;
  9.     vertical-align: middle;
  10.     color: #666;
  11.     font-size: 14px;
  12. }

设置父子节点选中是否关联

展示受控多选以及是否开启严格受控父子节点选中不再关联的用法。

Cascader 级联 - 图5

查看源码在线预览

  1. import { Checkbox, Cascader } from '@alifd/next';
  3. class Demo extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  7.         this.state = {
  8.             value: [],
  9.             data: [],
  10.             checkStrictly: false
  11.         };
  13.         this.handleCheck = this.handleCheck.bind(this);
  14.         this.handleChange = this.handleChange.bind(this);
  15.     }
  17.     componentDidMount() {
  18.         fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
  19.             .then(response => response.json())
  20.             .then(data => this.setState({ data, value: ['2975'] }))
  21.             .catch(e => console.log(e));
  22.     }
  24.     handleCheck() {
  25.         this.setState({
  26.             checkStrictly: !this.state.checkStrictly,
  27.             value: []
  28.         });
  29.     }
  31.     handleChange(value, data, extra) {
  32.         console.log(value, data, extra);
  34.         this.setState({
  35.             value
  36.         });
  37.     }
  39.     render() {
  40.         return (
  41.             <div className="control-multiple-demo">
  42.                 <label className="strictly-check">
  43.                     <Checkbox value={this.state.checkStrictly} onChange={this.handleCheck} />
  44.                     <span className="strictly-text">Enable checkStrictly</span>
  45.                 </label>
  46.                 <Cascader multiple checkStrictly={this.state.checkStrictly} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />
  47.             </div>
  48.         );
  49.     }
  50. }
  52. ReactDOM.render(<Demo />, mountNode);
  1. .control-multiple-demo .strictly-check {
  2.     display: block;
  3.     margin-bottom: 10px;
  4. }
  6. .control-multiple-demo .strictly-text {
  7.     display: inline-block;
  8.     margin-left: 10px;
  9.     vertical-align: middle;
  10.     color: #666;
  11.     font-size: 14px;
  12. }

自定义样式

可以通过listStyle，listClassName来定制组件宽高。

Cascader 级联 - 图6

查看源码在线预览

  1. import { Cascader } from '@alifd/next';
  3. const dataSource = [{
  4.     value: '2973',
  5.     label: '陕西',
  6.     children: [{
  7.         value: '2974',
  8.         label: '西安',
  9.         children: [
  10.             { value: '2975', label: '西安市' },
  11.             { value: '2976', label: '高陵县' }
  12.         ]
  13.     }, {
  14.         value: '2980',
  15.         label: '铜川',
  16.         children: [
  17.             { value: '2981', label: '铜川市' },
  18.             { value: '2982', label: '宜君县' }
  19.         ]
  20.     }]
  21. }, {
  22.     value: '3371',
  23.     label: '新疆',
  24.     children: [{
  25.         value: '3430',
  26.         label: '巴音郭楞蒙古自治州',
  27.         children: [
  28.             { value: '3431', label: '库尔勒市' },
  29.             { value: '3432', label: '和静县' }
  30.         ]
  31.     }]
  32. }];
  34. ReactDOM.render(<Cascader defaultValue="3439" defaultExpandedValue={['3371', '3430']} listStyle={{ width: '200px', height: '256px' }} dataSource={dataSource} />, mountNode);

异步加载数据

展示动态获取数据的用法。

Cascader 级联 - 图7

查看源码在线预览

  1. import { Cascader } from '@alifd/next';
  3. const dataSource = [{
  4.     value: '2973',
  5.     label: '陕西'
  6. }];
  8. class Demo extends React.Component {
  9.     constructor(props) {
  10.         super(props);
  12.         this.state = {
  13.             dataSource
  14.         };
  16.         this.onLoadData = this.onLoadData.bind(this);
  17.     }
  19.     onLoadData(data) {
  20.         console.log(data);
  22.         return new Promise(resolve => {
  23.             setTimeout(() => {
  24.                 this.setState({
  25.                     dataSource: [{
  26.                         value: '2973',
  27.                         label: '陕西',
  28.                         children: [{
  29.                             value: '2974',
  30.                             label: '西安',
  31.                             children: [
  32.                                 { value: '2975', label: '西安市', isLeaf: true },
  33.                                 { value: '2976', label: '高陵县', isLeaf: true }
  34.                             ]
  35.                         }, {
  36.                             value: '2980',
  37.                             label: '铜川',
  38.                             children: [
  39.                                 { value: '2981', label: '铜川市', isLeaf: true },
  40.                                 { value: '2982', label: '宜君县', isLeaf: true }
  41.                             ]
  42.                         }]
  43.                     }]
  44.                 }, resolve);
  45.             }, 500);
  46.         });
  47.     }
  49.     render() {
  50.         return <Cascader canOnlySelectLeaf dataSource={this.state.dataSource} loadData={this.onLoadData} />;
  51.     }
  52. }
  54. ReactDOM.render(<Demo />, mountNode);
  1. .cascader-value {
  2.     margin-bottom: 10px;
  3.     font-size: 14px;
  4.     color: #666;
  5. }

异步加载数据

展示动态获取数据的用法。

Cascader 级联 - 图8

查看源码在线预览

  1. import { Cascader } from '@alifd/next';
  3. const dataSource = [{
  4.     value: '2974',
  5.     label: '西安'
  6. }, {
  7.     value: '2980',
  8.     label: '铜川'
  9. }];
  11. class Demo extends React.Component {
  12.     constructor(props) {
  13.         super(props);
  15.         this.state = {
  16.             dataSource
  17.         };
  19.         this.onLoadData = this.onLoadData.bind(this);
  20.     }
  22.     onLoadData(data, source) {
  23.         console.log(data, source);
  25.         return new Promise(resolve => {
  26.             source.children = source.value === '2974' ? [
  27.                 { value: '2975', label: '西安市', isLeaf: true },
  28.                 { value: '2976', label: '高陵县', isLeaf: true }
  29.             ] : [
  30.                 { value: '2981', label: '铜川市', isLeaf: true },
  31.                 { value: '2982', label: '宜君县', isLeaf: true }
  32.             ];
  33.             setTimeout(() => {
  34.                 this.setState({
  35.                     dataSource: this.state.dataSource
  36.                 }, resolve);
  37.             }, 500);
  38.         });
  39.     }
  41.     render() {
  42.         return <Cascader canOnlySelectLeaf dataSource={this.state.dataSource} loadData={this.onLoadData} />;
  43.     }
  44. }
  46. ReactDOM.render(<Demo />, mountNode);
  1. .cascader-value {
  2.     margin-bottom: 10px;
  3.     font-size: 14px;
  4.     color: #666;
  5. }

相关区块

Cascader 级联 - 图9

暂无相关区块