Cascader 级联

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

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

开发指南

何时使用

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

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

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

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

API

级联

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
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>-
expandTrigger展开触发的方式可选值:'click', 'hover'Enum'click'
onExpand展开时触发的回调函数签名:Function(expandedValue: Array) => void参数:expandedValue: {Array} 各列展开值的数组Function-
multiple是否多选Booleanfalse
canOnlySelectLeaf单选时是否只能选中叶子节点Booleanfalse
canOnlyCheckLeaf多选时是否只能选中叶子节点Booleanfalse
checkStrictly父子节点是否选中不关联Booleanfalse
labelWidth文字区域宽度，当文字超过宽度时，结尾会以省略号显示，默认值为文字实际宽度String/Number-
showItemCount每一列展示的个数String/Number6
loadData异步加载数据函数签名:Function(data: Object) => void参数:data: {Object} 当前点击异步加载的数据Function-

代码示例

基本使用

展示基本的单选用法。

Cascader 级联 - 图1

查看源码在线预览

  1. import { Cascader } from "@icedesign/base";
  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">选择：{this.state.label}</div>
  37.         <Cascader
  38.           dataSource={this.state.data}
  39.           defaultValue="2975"
  40.           onChange={this.handleChange}
  41.         />
  42.       </div>
  43.     );
  44.   }
  45. }
  47. ReactDOM.render(<Demo />, mountNode);
  1. .cascader-value {
  2.     margin-bottom: 10px;
  3.     font-size: 14px;
  4.     color: #666;
  5. }

自定义样式

可以通过labelWidth, showItemCount来定制组件宽高，其中通过labelWidth可设置文字区域宽度，当文字超过宽度时，结尾会以省略号显示，默认值为文字实际宽度，通过showItemCount可设置展示的菜单项个数。

Cascader 级联 - 图2

查看源码在线预览

  1. import { Cascader } from "@icedesign/base";
  3. const dataSource = [
  4.   {
  5.     value: "2973",
  6.     label: "陕西",
  7.     children: [
  8.       {
  9.         value: "2974",
  10.         label: "西安",
  11.         children: [
  12.           { value: "2975", label: "西安市" },
  13.           { value: "2976", label: "高陵县" }
  14.         ]
  15.       },
  16.       {
  17.         value: "2980",
  18.         label: "铜川",
  19.         children: [
  20.           { value: "2981", label: "铜川市" },
  21.           { value: "2982", label: "宜君县" }
  22.         ]
  23.       }
  24.     ]
  25.   },
  26.   {
  27.     value: "3371",
  28.     label: "新疆",
  29.     children: [
  30.       {
  31.         value: "3430",
  32.         label: "巴音郭楞蒙古自治州",
  33.         children: [
  34.           { value: "3431", label: "库尔勒市" },
  35.           { value: "3432", label: "和静县" }
  36.         ]
  37.       }
  38.     ]
  39.   }
  40. ];
  42. ReactDOM.render(
  43.   <Cascader
  44.     defaultValue="3439"
  45.     defaultExpandedValue={["3371", "3430"]}
  46.     showItemCount="5"
  47.     labelWidth="100"
  48.     dataSource={dataSource}
  49.   />,
  50.   mountNode
  51. );

异步加载数据

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

Cascader 级联 - 图3

查看源码在线预览

  1. import { Cascader } from "@icedesign/base";
  3. const dataSource = [
  4.   {
  5.     value: "2973",
  6.     label: "陕西"
  7.   }
  8. ];
  10. class Demo extends React.Component {
  11.   constructor(props) {
  12.     super(props);
  14.     this.state = {
  15.       dataSource
  16.     };
  18.     this.onLoadData = this.onLoadData.bind(this);
  19.   }
  21.   onLoadData(data) {
  22.     console.log(data);
  24.     return new Promise(resolve => {
  25.       setTimeout(() => {
  26.         this.setState(
  27.           {
  28.             dataSource: [
  29.               {
  30.                 value: "2973",
  31.                 label: "陕西",
  32.                 children: [
  33.                   {
  34.                     value: "2974",
  35.                     label: "西安",
  36.                     children: [
  37.                       { value: "2975", label: "西安市", isLeaf: true },
  38.                       { value: "2976", label: "高陵县", isLeaf: true }
  39.                     ]
  40.                   },
  41.                   {
  42.                     value: "2980",
  43.                     label: "铜川",
  44.                     children: [
  45.                       { value: "2981", label: "铜川市", isLeaf: true },
  46.                       { value: "2982", label: "宜君县", isLeaf: true }
  47.                     ]
  48.                   }
  49.                 ]
  50.               }
  51.             ]
  52.           },
  53.           resolve
  54.         );
  55.       }, 500);
  56.     });
  57.   }
  59.   render() {
  60.     return (
  61.       <Cascader
  62.         canOnlySelectLeaf
  63.         dataSource={this.state.dataSource}
  64.         loadData={this.onLoadData}
  65.       />
  66.     );
  67.   }
  68. }
  70. ReactDOM.render(<Demo />, mountNode);
  1. .cascader-value {
  2.     margin-bottom: 10px;
  3.     font-size: 14px;
  4.     color: #666;
  5. }

展开触发行为

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

Cascader 级联 - 图4

查看源码在线预览

  1. import { Radio, Cascader } from "@icedesign/base";
  3. const { Group: RadioGroup } = Radio;
  5. class Demo extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  9.     this.state = {
  10.       trigger: "click",
  11.       data: []
  12.     };
  14.     this.handleChange = this.handleChange.bind(this);
  15.     this.handleChangeTrigger = this.handleChangeTrigger.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.   handleChangeTrigger(trigger) {
  30.     this.setState({
  31.       trigger
  32.     });
  33.   }
  35.   render() {
  36.     return (
  37.       <div>
  38.         <div className="trigger-check">
  39.           展开触发行为：
  40.           <RadioGroup
  41.             dataSource={["click", "hover"]}
  42.             value={this.state.trigger}
  43.             onChange={this.handleChangeTrigger}
  44.           />
  45.         </div>
  47.         <Cascader
  48.           expandTrigger={this.state.trigger}
  49.           dataSource={this.state.data}
  50.           onChange={this.handleChange}
  51.         />
  52.       </div>
  53.     );
  54.   }
  55. }
  57. ReactDOM.render(<Demo />, mountNode);
  1. .trigger-check {
  2.     margin-bottom: 10px;
  3.     font-size: 14px;
  4.     color: #666;
  5. }

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

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

Cascader 级联 - 图5

查看源码在线预览

  1. import { Checkbox, Cascader } from "@icedesign/base";
  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
  44.             value={this.state.checkStrictly}
  45.             onChange={this.handleCheck}
  46.           />
  47.           <span className="strictly-text">
  48.             开启严格受控，父子节点选中不再关联
  49.           </span>
  50.         </label>
  51.         <Cascader
  52.           multiple
  53.           checkStrictly={this.state.checkStrictly}
  54.           value={this.state.value}
  55.           dataSource={this.state.data}
  56.           onChange={this.handleChange}
  57.         />
  58.       </div>
  59.     );
  60.   }
  61. }
  63. 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. }

多选

展示基本的多选用法。

Cascader 级联 - 图6

查看源码在线预览

  1. import { Cascader } from "@icedesign/base";
  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">选择：{this.state.label}</div>
  38.         <Cascader
  39.           multiple
  40.           defaultValue={["2975"]}
  41.           dataSource={this.state.data}
  42.           onChange={this.handleChange}
  43.         />
  44.       </div>
  45.     );
  46.   }
  47. }
  49. ReactDOM.render(<Demo />, mountNode);
  1. .cascader-value {
  2.     width: 500px;
  3.     margin-bottom: 10px;
  4.     font-size: 14px;
  5.     color: #666;
  6. }

设置是否只能选择叶子项

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

Cascader 级联 - 图7

查看源码在线预览

  1. import { Checkbox, Cascader } from "@icedesign/base";
  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
  44.             value={this.state.canOnlySelectLeaf}
  45.             onChange={this.handleCheck}
  46.           />
  47.           <span className="leaf-text">开启只能选择叶子项</span>
  48.         </label>
  49.         <Cascader
  50.           canOnlySelectLeaf={this.state.canOnlySelectLeaf}
  51.           value={this.state.value}
  52.           dataSource={this.state.data}
  53.           onChange={this.handleChange}
  54.         />
  55.       </div>
  56.     );
  57.   }
  58. }
  60. 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 级联 - 图8

暂无相关区块