CascaderSelect 级联选择

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

安装方法

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

开发指南

何时使用

级联选择由选择器和级联组成。把级联组件以弹层的方式隐藏，多用于表单场景。

API

级联选择

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
size选择框大小可选值:'small', 'medium', 'large'Enum'medium'
shape选择框形状可选值:'normal', 'arrow-only'Enum'normal'
placeholder选择框占位符String-
disabled是否禁用Booleanfalse
hasArrow是否显示右侧的箭头Booleantrue
hasClear是否显示清空按钮，该按钮可以清空当前选中的值，该属性仅在单选模式下有效Booleanfalse
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-
defaultVisible初始下拉框是否显示Booleanfalse
defaultExpandedValue默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置Array<String>-
expandTrigger展开触发的方式可选值:'click', 'hover'Enum'click'
multiple是否多选Booleanfalse
changeOnSelect是否选中即发生改变, 该属性仅在单选模式下有效Booleanfalse
canOnlyCheckLeaf是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效Booleanfalse
checkStrictly父子节点是否选中不关联Booleanfalse
labelWidth文字区域宽度，当文字超过宽度时，结尾会以省略号显示，默认值为文字实际宽度String/Number-
showItemCount每一列展示的个数String/Number6
displayRender选择框单选时展示结果的函数签名:Function(label: Array) => ReactNode参数:label: {Array} 选中路径的文本数组返回值:{ReactNode} 渲染在选择框中的内容Functionlabel => label.join(' / ')
popupClassName下拉框样式自定义类名String-
container下拉框挂载的容器节点String/Function-
loadData异步加载数据函数签名:Function(data: Object) => void参数:data: {Object} 当前点击异步加载的数据Function-

代码示例

基本使用

展示基本的单选用法。

CascaderSelect 级联选择 - 图1

查看源码在线预览

  1. import { CascaderSelect } from "@icedesign/base";
  3. class Demo extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  7.     this.state = {
  8.       data: []
  9.     };
  11.     this.handleChange = this.handleChange.bind(this);
  12.   }
  14.   componentDidMount() {
  15.     fetch("https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json")
  16.       .then(response => response.json())
  17.       .then(data => {
  18.         data[1].disabled = true;
  19.         this.setState({ data });
  20.       })
  21.       .catch(e => console.log(e));
  22.   }
  24.   handleChange(value, data, extra) {
  25.     console.log(value, data, extra);
  26.   }
  28.   render() {
  29.     return (
  30.       <CascaderSelect
  31.         dataSource={this.state.data}
  32.         onChange={this.handleChange}
  33.       />
  34.     );
  35.   }
  36. }
  38. ReactDOM.render(<Demo />, mountNode);

自定义样式

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

CascaderSelect 级联选择 - 图2

查看源码在线预览

  1. import { CascaderSelect } 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. const displayRender = labels => {
  43.   return labels.reduce((ret, label, index) => {
  44.     ret.push(
  45.       <span className="label-ellipsis" title={label}>
  46.         {label}
  47.       </span>
  48.     );
  49.     if (index < labels.length - 1) {
  50.       ret.push(<span className="label-separator"> / </span>);
  51.     }
  52.     return ret;
  53.   }, []);
  54. };
  56. ReactDOM.render(
  57.   <CascaderSelect
  58.     style={{ width: "240px" }}
  59.     displayRender={displayRender}
  60.     showItemCount="5"
  61.     labelWidth="80"
  62.     defaultValue="3431"
  63.     dataSource={dataSource}
  64.   />,
  65.   mountNode
  66. );
  1. .label-ellipsis {
  2.     display: inline-block;
  3.     max-width: 80px;
  4.     overflow: hidden;
  5.     text-overflow: ellipsis;
  6.     white-space: nowrap;
  7.     word-wrap: normal;
  8. }
  9. .label-separator {
  10.     display: inline-block;
  11.     vertical-align: top;
  12.     margin: 0 5px;
  13. }

异步加载数据

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

CascaderSelect 级联选择 - 图3

查看源码在线预览

  1. import { CascaderSelect } 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.       <CascaderSelect
  62.         dataSource={this.state.dataSource}
  63.         loadData={this.onLoadData}
  64.       />
  65.     );
  66.   }
  67. }
  69. ReactDOM.render(<Demo />, mountNode);

展开触发行为

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

CascaderSelect 级联选择 - 图4

查看源码在线预览

  1. import { Radio, CascaderSelect } 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.         <CascaderSelect
  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. }

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

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

CascaderSelect 级联选择 - 图5

查看源码在线预览

  1. import { Checkbox, CascaderSelect } 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.         <CascaderSelect
  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. }

多选

展示基本的多选用法。

CascaderSelect 级联选择 - 图6

查看源码在线预览

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

设置是否只能选择叶子项

展示受控单选以及是否选择即改变。

CascaderSelect 级联选择 - 图7

查看源码在线预览

  1. import { Checkbox, CascaderSelect } from "@icedesign/base";
  3. class Demo extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  7.     this.state = {
  8.       value: null,
  9.       changeOnSelect: 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.       changeOnSelect: !this.state.changeOnSelect,
  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="change-check">
  43.           <Checkbox
  44.             value={this.state.changeOnSelect}
  45.             onChange={this.handleCheck}
  46.           />
  47.           <span className="change-text">开启选择即改变</span>
  48.         </label>
  49.         <CascaderSelect
  50.           hasClear
  51.           changeOnSelect={this.state.changeOnSelect}
  52.           value={this.state.value}
  53.           dataSource={this.state.data}
  54.           onChange={this.handleChange}
  55.         />
  56.       </div>
  57.     );
  58.   }
  59. }
  61. ReactDOM.render(<Demo />, mountNode);
  1. .control-single-demo .change-check {
  2.     display: block;
  3.     margin-bottom: 10px;
  4. }
  6. .control-single-demo .change-text {
  7.     display: inline-block;
  8.     margin-left: 10px;
  9.     vertical-align: middle;
  10.     color: #666;
  11.     font-size: 14px;
  12. }

相关区块

CascaderSelect 级联选择 - 图8

暂无相关区块