Cascader 级联选择

级联选择框。

何时使用

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

注意: 组件支持多选，单选时候返回 value 为 [a,b,c,d]，多选返回值为[[a,b,c,d],[a,b,c,d]]

代码演示

基础受控

基础受控。

Cascader级联选择 - 图1

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Cascader } from 'choerodon-ui/pro';
  5. ​
  6. const options = [
  7.   {
  8.     value: 'zhejiang',
  9.     meaning: 'Zhejiang',
  10.     children: [
  11.       {
  12.         value: 'hangzhou',
  13.         meaning: 'Hangzhou',
  14.         children: [
  15.           {
  16.             value: 'xihu',
  17.             meaning: 'West Lake',
  18.           },
  19.         ],
  20.       },
  21.     ],
  22.   },
  23.   {
  24.     value: 'jiangsu',
  25.     meaning: 'Jiangsu',
  26.     children: [
  27.       {
  28.         value: 'nanjing',
  29.         meaning: 'Nanjing',

数据源选项

数据源选项。

Cascader级联选择 - 图2

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Cascader } from 'choerodon-ui/pro';
  5. ​
  6. function handleDataSetChange({ record, name, value, oldValue }) {
  7.   console.log(
  8.     '[dataset newValue]',
  9.     value,
  10.     '[oldValue]',
  11.     oldValue,
  12.     `[record.get('${name}')]`,
  13.     record.get(name),
  14.   );
  15. }
  16. ​
  17. class App extends React.Component {
  18.   optionDs = new DataSet({
  19.     queryUrl: '/tree-less.mock',
  20.     autoQuery: true,
  21.     selection: 'mutiple',
  22.     parentField: 'parentId',
  23.     idField: 'id',
  24.     fields: [
  25.       { name: 'id', type: 'string' },
  26.       { name: 'expand', type: 'boolean' },
  27.       { name: 'parentId', type: 'string' },
  28.     ],
  29.   });

多选

多选

Cascader级联选择 - 图3

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Cascader } from 'choerodon-ui/pro';
  5. ​
  6. function handleDataSetChange({ record, name, value, oldValue }) {
  7.   console.log(
  8.     '[dataset newValue]',
  9.     value,
  10.     '[oldValue]',
  11.     oldValue,
  12.     `[record.get('${name}')]`,
  13.     record.get(name),
  14.   );
  15. }
  16. ​
  17. class App extends React.Component {
  18.   optionDs = new DataSet({
  19.     queryUrl: '/tree-less.mock',
  20.     autoQuery: true,
  21.     selection: 'mutiple',
  22.     parentField: 'parentId',
  23.     idField: 'id',
  24.     fields: [
  25.       { name: 'id', type: 'string' },
  26.       { name: 'expand', type: 'boolean' },
  27.       { name: 'parentId', type: 'string' },
  28.     ],
  29.   });

鼠标移动上去触发选择

鼠标移动上去触发选择

Cascader级联选择 - 图4

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Cascader } from 'choerodon-ui/pro';
  5. ​
  6. function handleDataSetChange({ record, name, value, oldValue }) {
  7.   console.log(
  8.     '[dataset newValue]',
  9.     value,
  10.     '[oldValue]',
  11.     oldValue,
  12.     `[record.get('${name}')]`,
  13.     record.get(name),
  14.   );
  15. }
  16. ​
  17. class App extends React.Component {
  18.   optionDs = new DataSet({
  19.     queryUrl: '/tree-less.mock',
  20.     autoQuery: true,
  21.     selection: 'mutiple',
  22.     parentField: 'parentId',
  23.     idField: 'id',
  24.     fields: [
  25.       { name: 'id', type: 'string' },
  26.       { name: 'expand', type: 'boolean' },
  27.       { name: 'parentId', type: 'string' },
  28.     ],
  29.   });

选择框禁用

选择框禁用

Cascader级联选择 - 图5

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Cascader } from 'choerodon-ui/pro';
  5. ​
  6. const options = [
  7.   {
  8.     value: 'zhejiang',
  9.     meaning: 'Zhejiang',
  10.     children: [
  11.       {
  12.         value: 'hangzhou',
  13.         meaning: 'Hangzhou',
  14.         children: [
  15.           {
  16.             value: 'xihu',
  17.             meaning: 'West Lake',
  18.           },
  19.         ],
  20.       },
  21.     ],
  22.   },
  23.   {
  24.     value: 'jiangsu',
  25.     meaning: 'Jiangsu',
  26.     children: [
  27.       {
  28.         value: 'nanjing',
  29.         meaning: 'Nanjing',

单列表模式

单列表模式

Cascader级联选择 - 图6

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Cascader } from 'choerodon-ui/pro';
  5. ​
  6. function handleDataSetChange({ record, name, value, oldValue }) {
  7.   console.log(
  8.     '[dataset newValue]',
  9.     value,
  10.     '[oldValue]',
  11.     oldValue,
  12.     `[record.get('${name}')]`,
  13.     record.get(name),
  14.   );
  15. }
  16. ​
  17. class App extends React.Component {
  18.   optionDs = new DataSet({
  19.     queryUrl: '/tree-less.mock',
  20.     autoQuery: true,
  21.     selection: 'mutiple',
  22.     parentField: 'parentId',
  23.     idField: 'id',
  24.     fields: [
  25.       { name: 'id', type: 'string' },
  26.       { name: 'expand', type: 'boolean' },
  27.       { name: 'parentId', type: 'string' },
  28.     ],
  29.   });

API

参数说明类型默认值
expandTrigger次级菜单的展开方式，可选： click | hoverstringclick
dropdownMatchSelectWidth下拉单个 框匹配输入框宽度booleantrue
dropdownMenuStyle下拉框菜单样式名object
options下拉框选项数据源DataSet | Array:[{meaning:,value:}]
primitiveValue是否为原始值（建议以绑定的数据源 Field 的 type 来决定值类型，如 type 设为 object 相当于 primitiveValue 设为 false）true - 选项中 valueField 对应的值 false - 选项值对象boolean
notFoundContent当下拉列表为空时显示的内容ReactNode
onOption设置选项属性，如 disabled({ dataSet, record })) => object | ({ options, item })) => object

menuMode 为 single，其中可以添加的配置：

参数说明类型默认值
singleMenuStyle由于渲染在body下可以方便按照业务配置弹出框的大小CSSProperties
singleMenuItemStyle由于渲染在body下可以方便按照业务配置超出大小样式和最小宽度等CSSProperties
singlePleaseRender设置需要的提示配置({key,className,text}) => ReactElement
singleMenuItemRender头部可以渲染出想要的tab样子(title:string) => ReactElement

无法配置的参数 expandIcon，

注意，如果需要获得中国省市区数据，可以参考 china-division。

更多属性请参考 TriggerField。