Select选择框

表单控件。

何时使用

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。

  • 当选项少时（少于 5 项），建议直接将选项平铺，使用 SelectBox 是更好的选择。

代码演示

Select 选择框 - 图1

基本使用

下拉选择器。

  1. import { Select, Button, Row, Col } from 'choerodon-ui/pro';
  3. function handleChange(value, oldValue) {
  4.   console.log('[basic new]', value, '[basic old]', oldValue);
  5. }
  7. const { Option } = Select;
  9. class App extends React.Component {
  10.   state = {
  11.     visible: true,
  12.   };
  14.   handleClick = () => this.setState({ visible: !this.state.visible });
  16.   render() {
  17.     return (
  18.       <Row gutter={10}>
  19.         <Col span={8}>
  20.           <Select placeholder="请选择" onChange={handleChange}>
  21.             <Option value="jack">Jack</Option>
  22.             <Option value="lucy">Lucy</Option>
  23.             {this.state.visible && (
  24.               <Option value="wu" disabled>
  25.                 Wu
  26.               </Option>
  27.             )}
  28.           </Select>
  29.         </Col>
  30.         <Col span={4}>
  31.           <Button onClick={this.handleClick}>修改选项</Button>
  32.         </Col>
  33.         <Col span={12}>
  34.           <Select placeholder="请选择" disabled>
  35.             <Option value="jack">Jack</Option>
  36.             <Option value="lucy">Lucy</Option>
  37.             <Option value="wu">Wu</Option>
  38.           </Select>
  39.         </Col>
  40.       </Row>
  41.     );
  42.   }
  43. }
  45. ReactDOM.render(<App />, mountNode);

Select 选择框 - 图2

值列表代码

值列表代码。

  1. import { DataSet, Select, Button, Row, Col } from 'choerodon-ui/pro';
  3. function handleDataSetChange({ record, name, value, oldValue }) {
  4.   console.log(
  5.     '[dataset newValue]',
  6.     value,
  7.     '[oldValue]',
  8.     oldValue,
  9.     `[record.get('${name}')]`,
  10.     record.get(name),
  11.   );
  12. }
  14. function handleOption({ record }) {
  15.   return {
  16.     disabled: record.index === 0,
  17.   };
  18. }
  20. class App extends React.Component {
  21.   flag = false;
  23.   ds = new DataSet({
  24.     autoCreate: true,
  25.     fields: [
  26.       { name: 'sex', type: 'string', lookupCode: 'HR.EMPLOYEE_GENDER' },
  27.       {
  28.         name: 'sex2',
  29.         type: 'string',
  30.         dynamicProps: {
  31.           lookupAxiosConfig: ({ record }) => ({
  32.             url: record.get('sex') ? '/common/code/HR.EMPLOYEE_GENDER/' : null,
  33.             transformResponse(data) {
  34.               console.log('transformResponse', data);
  35.               return data;
  36.             },
  37.           }),
  38.         },
  39.       },
  40.       { name: 'lov', type: 'string', lovCode: 'LOV_CODE', defaultValue: 'SYS.PROFILE_LEVEL_ID' },
  41.       {
  42.         name: 'lov2',
  43.         type: 'string',
  44.         lovCode: 'LOV_CODE',
  45.         defaultValue: ['SYS.PROFILE_LEVEL_ID', 'SYS.RESOURCE_TYPE'],
  46.         multiple: true,
  47.       },
  48.     ],
  49.     events: {
  50.       update: handleDataSetChange,
  51.     },
  52.   });
  54.   changeLookupCode = () => {
  55.     this.flag = !this.flag;
  56.     this.ds.getField('sex').set('lookupCode', this.flag ? 'SYS.USER_STATUS' : 'HR.EMPLOYEE_GENDER');
  57.   };
  59.   render() {
  60.     return (
  61.       <Row gutter={10}>
  62.         <Col span={6}>
  63.           <Select dataSet={this.ds} name="sex" placeholder="请选择" onOption={handleOption} />
  64.         </Col>
  65.         <Col span={6}>
  66.           <Button onClick={this.changeLookupCode}>修改lookupCode</Button>
  67.         </Col>
  68.         <Col span={12}>
  69.           <Select dataSet={this.ds} name="sex2" placeholder="请选择" />
  70.         </Col>
  71.         <Col span={12}>
  72.           <Select dataSet={this.ds} name="lov" placeholder="请选择" />
  73.         </Col>
  74.         <Col span={12}>
  75.           <Select dataSet={this.ds} name="lov2" placeholder="请选择" />
  76.         </Col>
  77.       </Row>
  78.     );
  79.   }
  80. }
  82. ReactDOM.render(<App />, mountNode);

Select 选择框 - 图3

数据源选项

数据源选项。

  1. import { DataSet, Select, Row, Col, Button } from 'choerodon-ui/pro';
  3. function handleDataSetChange({ record, name, value, oldValue }) {
  4.   console.log(
  5.     '[dataset newValue]',
  6.     value,
  7.     '[oldValue]',
  8.     oldValue,
  9.     `[record.get('${name}')]`,
  10.     record.get(name),
  11.   );
  12. }
  14. class App extends React.Component {
  15.   optionDs = new DataSet({
  16.     selection: 'single',
  17.     queryUrl: '/dataset/user/queries',
  18.     autoQuery: true,
  19.   });
  21.   ds = new DataSet({
  22.     fields: [
  23.       {
  24.         name: 'user',
  25.         type: 'string',
  26.         textField: 'name',
  27.         valueField: 'userid',
  28.         label: '用户',
  29.         options: this.optionDs,
  30.       },
  31.     ],
  32.     events: {
  33.       update: handleDataSetChange,
  34.     },
  35.   });
  37.   changeOptions = () => {
  38.     this.ds.addField('account', {
  39.       name: 'account',
  40.       type: 'string',
  41.       textField: 'name',
  42.       valueField: 'userid',
  43.       label: '账户',
  44.       options: this.optionDs,
  45.     });
  46.   };
  48.   render() {
  49.     return (
  50.       <Row gutter={10}>
  51.         <Col span={8}>
  52.           <Select
  53.             multiple
  54.             optionsFilter={record => record.get('sex') === 'F'}
  55.             dataSet={this.ds}
  56.             name="user"
  57.           />
  58.         </Col>
  59.         <Col span={8}>
  60.           <Select multiple dataSet={this.ds} name="account" />
  61.         </Col>
  62.         <Col span={8}>
  63.           <Button onClick={this.changeOptions}>切换选项</Button>
  64.         </Col>
  65.       </Row>
  66.     );
  67.   }
  68. }
  70. ReactDOM.render(<App />, mountNode);

Select 选择框 - 图4

过滤

通过属性optionsFilter过滤选项。

  1. import { DataSet, Select, Button } from 'choerodon-ui/pro';
  3. const { Option } = Select;
  5. const data = [{
  6.   'last-name': 'huazhen',
  7. }];
  9. class App extends React.Component {
  10.   state = {
  11.     key: 'a',
  12.   };
  14.   ds = new DataSet({
  15.     data,
  16.     fields: [
  17.       { name: 'last-name', type: 'string', label: '姓' },
  18.     ],
  19.   });
  21.   handleClick = () => {
  22.     this.setState({ key: this.state.key === 'a' ? 'c' : 'a' });
  23.   };
  25.   optionsFilter = (record) => {
  26.     return record.get('meaning').toLowerCase().indexOf(this.state.key) !== -1;
  27.   };
  29.   render() {
  30.     return (
  31.       <div>
  32.         <Select dataSet={this.ds} name="last-name" optionsFilter={this.optionsFilter}>
  33.           <Option value="jack">Jack</Option>
  34.           <Option value="lucy">Lucy</Option>
  35.           <Option value="huazhen">Huazhen</Option>
  36.         </Select>
  37.         <Button onClick={this.handleClick}>切换过滤条件</Button>
  38.       </div>
  39.     );
  40.   }
  41. }
  43. ReactDOM.render(
  44.   <App />,
  45.   mountNode
  46. );

Select 选择框 - 图5

只读

只读。

  1. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  3. const { Option } = Select;
  5. const data = [{
  6.   'first-name': 'huazhen',
  7. }];
  9. class App extends React.Component {
  10.   ds = new DataSet({
  11.     data,
  12.     fields: [
  13.       { name: 'first-name', readOnly: true },
  14.     ],
  15.   });
  17.   render() {
  18.     return (
  19.       <Row gutter={10}>
  20.         <Col span={12}>
  21.           <Select name="last-name" placeholder="请选择" readOnly defaultValue="jack">
  22.             <Option value="jack">Jack</Option>
  23.             <Option value="lucy">Lucy</Option>
  24.             <Option value="wu">Wu</Option>
  25.           </Select>
  26.         </Col>
  27.         <Col span={12}>
  28.           <Select dataSet={this.ds} name="first-name" />
  29.         </Col>
  30.       </Row>
  31.     );
  32.   }
  33. }
  35. ReactDOM.render(
  36.   <App />,
  37.   mountNode
  38. );

Select 选择框 - 图6

多值

通过属性multiple设置为多值。

  1. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  3. function handleChange(value, oldValue) {
  4.   console.log('[multiple]', value, '[oldValue]', oldValue);
  5. }
  7. function handleDataSetChange({ record, name, value, oldValue }) {
  8.   console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  9. }
  11. const { Option } = Select;
  13. const data = [{
  14.   user: ['wu'],
  15. }];
  17. class App extends React.Component {
  18.   ds = new DataSet({
  19.     data,
  20.     fields: [
  21.       { name: 'user', type: 'string', textField: 'text', label: '用户', multiple: true },
  22.     ],
  23.     events: {
  24.       update: handleDataSetChange,
  25.     },
  26.   });
  28.   render() {
  29.     return (
  30.       <Row gutter={10}>
  31.         <Col span={24}>
  32.           <Select dataSet={this.ds} name="user" placeholder="数据源多选" maxTagCount={2} maxTagTextLength={3} maxTagPlaceholder={restValues => `+${restValues.length}...`}>
  33.             <Option value="jack">Jack</Option>
  34.             <Option value="lucy">Lucy</Option>
  35.             <Option value="wu">Wu</Option>
  36.             <Option value="a1">a1</Option>
  37.             <Option value="b2">b2</Option>
  38.             <Option value="c3">c3</Option>
  39.           </Select>
  40.         </Col>
  41.         <Col span={12}>
  42.           <Select multiple placeholder="多选" onChange={handleChange} defaultValue={['jack', 'wu']}>
  43.             <Option value="jack">Jack</Option>
  44.             <Option value="lucy">Lucy</Option>
  45.             <Option value="wu">Wu</Option>
  46.           </Select>
  47.         </Col>
  48.         <Col span={12}>
  49.           <Select multiple searchable placeholder="多选+搜索" onChange={handleChange} style={{ height: 30 }}>
  50.             <Option value="jack">Jack</Option>
  51.             <Option value="lucy">Lucy</Option>
  52.             <Option value="wu">Wu</Option>
  53.             <Option value="a1">a1</Option>
  54.             <Option value="b2">b2</Option>
  55.             <Option value="c3">c3</Option>
  56.           </Select>
  57.         </Col>
  58.         <Col span={12}>
  59.           <Select multiple combo placeholder="多选+复合" onChange={handleChange}>
  60.             <Option value="jack">Jack</Option>
  61.             <Option value="lucy">Lucy</Option>
  62.             <Option value="wu">Wu</Option>
  63.             <Option value="a1">a1</Option>
  64.             <Option value="b2">b2</Option>
  65.             <Option value="c3">c3</Option>
  66.           </Select>
  67.         </Col>
  68.         <Col span={12}>
  69.           <Select multiple combo searchable placeholder="多选+复合+过滤" onChange={handleChange}>
  70.             <Option value="jack">Jack</Option>
  71.             <Option value="lucy">Lucy</Option>
  72.             <Option value="wu">Wu</Option>
  73.             <Option value="a1">a1</Option>
  74.             <Option value="b2">b2</Option>
  75.             <Option value="c3">c3</Option>
  76.           </Select>
  77.         </Col>
  78.         <Col span={12}>
  79.           <Select multiple placeholder="多选+禁用" disabled defaultValue={['jack', 'wu']}>
  80.             <Option value="jack">Jack</Option>
  81.             <Option value="lucy">Lucy</Option>
  82.             <Option value="wu">Wu</Option>
  83.             <Option value="a1">a1</Option>
  84.             <Option value="b2">b2</Option>
  85.             <Option value="c3">c3</Option>
  86.           </Select>
  87.         </Col>
  88.         <Col span={12}>
  89.           <Select multiple placeholder="多选+只读" readOnly defaultValue={['jack', 'wu']}>
  90.             <Option value="jack">Jack</Option>
  91.             <Option value="lucy">Lucy</Option>
  92.             <Option value="wu">Wu</Option>
  93.             <Option value="a1">a1</Option>
  94.             <Option value="b2">b2</Option>
  95.             <Option value="c3">c3</Option>
  96.           </Select>
  97.         </Col>
  98.       </Row>
  99.     );
  100.   }
  101. }
  103. ReactDOM.render(
  104.   <App />,
  105.   mountNode
  106. );

Select 选择框 - 图7

非原始值

非原始值。

  1. import { Select } from 'choerodon-ui/pro';
  3. function handleChange(value, oldValue) {
  4.   console.log('[primitive new]', value, '[basic old]', oldValue);
  5. }
  7. const { Option } = Select;
  9. ReactDOM.render(
  10.   <Select placeholder="请选择" primitiveValue={false} onChange={handleChange}>
  11.     <Option value="jack">Jack</Option>
  12.     <Option value="lucy">Lucy</Option>
  13.     <Option value="wu">Wu</Option>
  14.   </Select>,
  15.   mountNode
  16. );

Select 选择框 - 图8

受控下拉选择器

受控下拉选择器。

  1. import { Select } from 'choerodon-ui/pro';
  3. const { Option } = Select;
  5. class App extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {
  9.       value: 'wu',
  10.     };
  11.   }
  13.   handleChange = (value, oldValue) => {
  14.     console.log('[constrolled]', 'value', value, 'oldValue', oldValue);
  15.     this.setState({
  16.       value,
  17.     });
  18.   }
  20.   render() {
  21.     return (
  22.       <Select name="last-name" placeholder="请选择" value={this.state.value} onChange={this.handleChange}>
  23.         <Option value="jack">Jack</Option>
  24.         <Option value="lucy">Lucy</Option>
  25.         <Option value="wu">Wu</Option>
  26.       </Select>
  27.     );
  28.   }
  29. }
  31. ReactDOM.render(
  32.   <App />,
  33.   mountNode
  34. );

Select 选择框 - 图9

绑定数据源

下拉选择器。

  1. import { DataSet, Select } from 'choerodon-ui/pro';
  3. function handleDataSetChange({ record, name, value, oldValue }) {
  4.   console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  5. }
  7. const { Option } = Select;
  9. const data = [{
  10.   user: 'wu',
  11. }];
  13. class App extends React.Component {
  14.   ds = new DataSet({
  15.     data,
  16.     fields: [
  17.       { name: 'user', type: 'string', textField: 'text', label: '用户' },
  18.     ],
  19.     events: {
  20.       update: handleDataSetChange,
  21.     },
  22.   });
  24.   render() {
  25.     return (
  26.       <Select dataSet={this.ds} name="user">
  27.         <Option value="jack">Jack</Option>
  28.         <Option value="lucy">Lucy</Option>
  29.         <Option value="wu">Wu</Option>
  30.       </Select>
  31.     );
  32.   }
  33. }
  35. ReactDOM.render(
  36.   <App />,
  37.   mountNode
  38. );

Select 选择框 - 图10

分组

有两种方式进行选项分组：

  • 用 OptGroup 进行选项分组。

  • 为OptionDs的Field添加group属性，属性值为从1开始的序数，用来指定分组的优先级。

  1. import { Select } from 'choerodon-ui/pro';
  3. const { Option, OptGroup } = Select;
  5. ReactDOM.render(
  6.   <Select>
  7.     <OptGroup label="Manager">
  8.       <Option value="jack">Jack</Option>
  9.       <Option value="lucy">Lucy</Option>
  10.     </OptGroup>
  11.     <OptGroup label="Engineer">
  12.       <Option value="wu">Wu</Option>
  13.     </OptGroup>
  14.   </Select>,
  15.   mountNode
  16. );

Select 选择框 - 图11

可搜索

可搜索。

  1. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  3. function handleDataSetChange({ record, name, value, oldValue }) {
  4.   console.log(
  5.     '[searchable]',
  6.     value,
  7.     '[oldValue]',
  8.     oldValue,
  9.     `[record.get('${name}')]`,
  10.     record.get(name),
  11.   );
  12. }
  14. const { Option } = Select;
  16. const data = [
  17.   {
  18.     'last-name': 'huazhen',
  19.   },
  20. ];
  22. function searchMatcher({ record, text }) {
  23.   return record.get('value').indexOf(text) !== -1;
  24. }
  26. class App extends React.Component {
  27.   ds = new DataSet({
  28.     data,
  29.     fields: [
  30.       { name: 'last-name', type: 'string' },
  31.       { name: 'first-name', type: 'string' },
  32.       { name: 'sex', type: 'string', lookupCode: 'HR.EMPLOYEE_GENDER' },
  33.     ],
  34.     events: {
  35.       update: handleDataSetChange,
  36.     },
  37.   });
  39.   render() {
  40.     return (
  41.       <Row>
  42.         <Col span={8}>
  43.           <Select dataSet={this.ds} name="last-name" searchable>
  44.             <Option value="jack">Jack</Option>
  45.             <Option value="lucy">Lucy</Option>
  46.             <Option value="huazhen">Huazhen</Option>
  47.             <Option value="aaa">Huazhen</Option>
  48.           </Select>
  49.         </Col>
  50.         <Col span={8}>
  51.           <Select dataSet={this.ds} name="first-name" searchable searchMatcher={searchMatcher}>
  52.             <Option value="jack">Jack</Option>
  53.             <Option value="lucy">Lucy</Option>
  54.             <Option value="huazhen">Huazhen</Option>
  55.             <Option value="aaa">Huazhen</Option>
  56.           </Select>
  57.         </Col>
  58.         <Col span={8}>
  59.           <Select dataSet={this.ds} name="sex" searchable searchMatcher="key" />
  60.         </Col>
  61.       </Row>
  62.     );
  63.   }
  64. }
  66. ReactDOM.render(<App />, mountNode);

Select 选择框 - 图12

复合下拉框

复合下拉框。

  1. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  3. function handleChange(value) {
  4.   console.log('[combo]', value);
  5. }
  7. const { Option } = Select;
  9. class App extends React.Component {
  10.   state = {
  11.     value: 'fox',
  12.   }
  14.   ds = new DataSet({
  15.     autoCreate: true,
  16.     fields: [
  17.       { name: 'name', defaultValue: 'fox2' },
  18.     ],
  19.   });
  21.   handleChange = (value) => {
  22.     console.log('[combo]', value);
  23.     this.setState({
  24.       value,
  25.     });
  26.     this.ds.current.set('name', value);
  27.   }
  29.   render() {
  30.     return (
  31.       <Row gutter={10}>
  32.         <Col span={12}>
  33.           <Select placeholder="复合" onChange={this.handleChange} combo value={this.state.value}>
  34.             <Option value="jack">Jack</Option>
  35.             <Option value="lucy">Lucy</Option>
  36.             <Option value="wu">Wu</Option>
  37.           </Select>
  38.         </Col>
  39.         <Col span={12}>
  40.           <Select dataSet={this.ds} name="name" placeholder="复合+可搜索" onChange={handleChange} combo searchable>
  41.             <Option value="jack">Jack</Option>
  42.             <Option value="lucy">Lucy</Option>
  43.             <Option value="wu">Wu</Option>
  44.           </Select>
  45.         </Col>
  46.       </Row>
  47.     );
  48.   }
  49. }
  51. ReactDOM.render(
  52.   <App />,
  53.   mountNode
  54. );

Select 选择框 - 图13

选项级联

选项级联。

  1. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  3. function handleDataSetChange({ record, value, oldValue }) {
  4.   console.log('[dataset]', value, '[oldValue]', oldValue, '[record.toJSONData()]', record.toJSONData());
  5. }
  7. class App extends React.Component {
  8.   ds = new DataSet({
  9.     autoCreate: true,
  10.     fields: [
  11.       {
  12.         name: 'sheng',
  13.         label: '省',
  14.         lookupCode: 'SHENG',
  15.         valueField: 'codeValueId',
  16.         defaultValue: '10206',
  17.       },
  18.       {
  19.         name: 'shi',
  20.         type: 'number',
  21.         valueField: 'codeValueId',
  22.         label: '市',
  23.         lookupCode: 'SHI',
  24.         cascadeMap: { parentCodeValueId: 'sheng' },
  25.       },
  26.     ],
  27.     events: {
  28.       update: handleDataSetChange,
  29.     },
  30.   });
  32.   render() {
  33.     return (
  34.       <Row gutter={10}>
  35.         <Col span={12}>
  36.           <Select dataSet={this.ds} name="sheng" />
  37.         </Col>
  38.         <Col span={12}>
  39.           <Select dataSet={this.ds} name="shi" />
  40.         </Col>
  41.       </Row>
  42.     );
  43.   }
  44. }
  46. ReactDOM.render(
  47.   <App />,
  48.   mountNode
  49. );

Select 选择框 - 图14

optionRenderer 输入属性

使用optionRenderer属性。

  1. import { DataSet, Select, Button, Row, Col, Menu, Tooltip, Icon } from 'choerodon-ui/pro';
  3. const Item = Menu.Item;
  5. const App = () => {
  6.   const optionDs = new DataSet({
  7.     selection: 'single',
  8.     queryUrl: '/dataset/user/queries',
  9.     autoQuery: true,
  10.   });
  12.   const ds = new DataSet({
  13.     fields: [
  14.       {
  15.         name: 'user',
  16.         type: 'string',
  17.         textField: 'name',
  18.         valueField: 'userid',
  19.         label: '用户',
  20.         options: optionDs,
  21.       },
  22.     ],
  23.   });
  25.   const renderer = ({ text }) => (
  26.     <div style={{ width: '100%' }}>
  27.       {text && <Icon type="people" />} {text}
  28.     </div>
  29.   );
  31.   const optionRenderer = ({ text }) => (
  32.     <Tooltip title={text} placement="left">
  33.       {renderer({ text })}
  34.     </Tooltip>
  35.   );
  37.   return (
  38.     <Row gutter={10}>
  39.       <Col span={8}>
  40.         <Select dataSet={ds} name="user" optionRenderer={optionRenderer} renderer={renderer} />
  41.       </Col>
  42.     </Row>
  43.   );
  44. };
  46. ReactDOM.render(<App />, mountNode);

API

Select

参数说明类型默认值
combo复合输入值booleanfalse
searchable是否可搜索booleanfalse
searchMatcher搜索器。当为字符串时，作为 lookup 的参数名来重新请求值列表。string | ({ record, text, textField, valueField }) => boolean({ record, text, textField }) => record.get(textField).indexOf(text) !== -1
optionsFilter选项过滤(record) => boolean
checkValueOnOptionsChange当选项改变时，检查并清除不在选项中的值booleantrue
dropdownMatchSelectWidth下拉框匹配输入框宽度booleantrue
dropdownMenuStyle下拉框菜单样式名object
options下拉框选项数据源DataSet
primitiveValue是否为原始值（建议以绑定的数据源 Field 的 type 来决定值类型，如 type 设为 object 相当于 primitiveValue 设为 false）true - 选项中 valueField 对应的值 false - 选项值对象boolean
optionRenderer渲染 Option 本文的钩子({ record, text, value }) => ReactNode
notFoundContent当下拉列表为空时显示的内容ReactNode
onOption设置选项属性，如 disabled({ dataSet, record })) => object

更多属性请参考 TriggerField。

Select.OptGroup

参数说明类型默认值
label选项组标题string

Select.Option

参数说明类型默认值
value选项值any
disabled禁用boolean