Select 选择框

下拉选择器表单控件。

何时使用

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于 5 项），建议直接将选项平铺，使用 SelectBox 是更好的选择。

数据源使用相关教程：Select

代码演示

基本使用

下拉选择器。

Select选择框 - 图1

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Select, Button, Row, Col } from 'choerodon-ui/pro';
  5. ​
  6. function handleChange(value, oldValue) {
  7.   console.log('[basic new]', value, '[basic old]', oldValue);
  8. }
  9. ​
  10. const { Option } = Select;
  11. ​
  12. class App extends React.Component {
  13.   state = {
  14.     visible: true,
  15.   };
  16. ​
  17.   handleClick = () => this.setState({ visible: !this.state.visible });
  18. ​
  19.   render() {
  20.     return (
  21.       <Row gutter={10}>
  22.         <Col span={8}>
  23.           <Select placeholder="请选择" onChange={handleChange}>
  24.             <Option value="jack">Jack</Option>
  25.             <Option value="lucy">Lucy</Option>
  26.             {this.state.visible && (
  27.               <Option value="wu" disabled>
  28.                 Wu
  29.               </Option>
  30.             )}

受控下拉选择器

受控下拉选择器。

Select选择框 - 图2

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

值列表代码

值列表代码。

Select选择框 - 图3

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Button, Row, Col } 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. function handleOption({ record }) {
  18.   return {
  19.     disabled: record.index === 0,
  20.   };
  21. }
  22. ​
  23. class App extends React.Component {
  24.   flag = false;
  25. ​
  26.   ds = new DataSet({
  27.     autoCreate: true,
  28.     fields: [
  29.       { name: 'sex', type: 'string', lookupCode: 'HR.EMPLOYEE_GENDER' },
  30.       {
  31.         name: 'sex2',
  32.         type: 'string',

绑定数据源

下拉选择器。

Select选择框 - 图4

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

数据源选项

数据源选项。

Select选择框 - 图5

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Row, Col, Button } 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.     selection: 'single',
  20.     queryUrl: '/dataset/user/queries',
  21.     autoQuery: true,
  22.   });
  23. ​
  24.   ds = new DataSet({
  25.     fields: [
  26.       {
  27.         name: 'user',
  28.         type: 'string',
  29.         textField: 'name',
  30.         valueField: 'userid',

分组

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

  1. 用 OptGroup 进行选项分组。
  2. 为OptionDs的Field添加group属性，属性值为从1开始的序数，用来指定分组的优先级。

Select选择框 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Select } from 'choerodon-ui/pro';
  4. ​
  5. const { Option, OptGroup } = Select;
  6. ​
  7. ReactDOM.render(
  8.   <Select>
  9.     <OptGroup label="Manager">
  10.       <Option value="jack">Jack</Option>
  11.       <Option value="lucy">Lucy</Option>
  12.     </OptGroup>
  13.     <OptGroup label="Engineer">
  14.       <Option value="wu">Wu</Option>
  15.     </OptGroup>
  16.   </Select>,
  17.   document.getElementById('container')
  18. );
  19. ​

过滤

通过属性optionsFilter过滤选项。

Select选择框 - 图7

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Button } from 'choerodon-ui/pro';
  5. ​
  6. const { Option } = Select;
  7. ​
  8. const data = [
  9.   {
  10.     'last-name': 'zhangsan',
  11.   },
  12. ];
  13. ​
  14. class App extends React.Component {
  15.   state = {
  16.     key: 'a',
  17.   };
  18. ​
  19.   ds = new DataSet({
  20.     data,
  21.     fields: [{ name: 'last-name', type: 'string', label: '姓' }],
  22.   });
  23. ​
  24.   handleClick = () => {
  25.     this.setState({ key: this.state.key === 'a' ? 'c' : 'a' });
  26.   };
  27. ​
  28.   optionsFilter = (record) => {
  29.     return record.get('meaning').toLowerCase().indexOf(this.state.key) !== -1;
  30.   };

可搜索

可搜索。

Select选择框 - 图8

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  5. ​
  6. function handleDataSetChange({ record, name, value, oldValue }) {
  7.   console.log(
  8.     '[searchable]',
  9.     value,
  10.     '[oldValue]',
  11.     oldValue,
  12.     `[record.get('${name}')]`,
  13.     record.get(name),
  14.   );
  15. }
  16. ​
  17. const { Option } = Select;
  18. ​
  19. const data = [
  20.   {
  21.     'last-name': 'zhangsan',
  22.   },
  23. ];
  24. ​
  25. function searchMatcher({ record, text }) {
  26.   return record.get('value').indexOf(text) !== -1;
  27. }
  28. ​
  29. class App extends React.Component {
  30.   ds = new DataSet({

只读

只读。

Select选择框 - 图9

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  5. ​
  6. const { Option } = Select;
  7. ​
  8. const data = [
  9.   {
  10.     'first-name': 'zhangsan',
  11.   },
  12. ];
  13. ​
  14. class App extends React.Component {
  15.   ds = new DataSet({
  16.     data,
  17.     fields: [{ name: 'first-name', readOnly: true }],
  18.   });
  19. ​
  20.   render() {
  21.     return (
  22.       <Row gutter={10}>
  23.         <Col span={12}>
  24.           <Select
  25.             name="last-name"
  26.             placeholder="请选择"
  27.             readOnly
  28.             defaultValue="jack"
  29.           >
  30.             <Option value="jack">Jack</Option>

复合下拉框

复合下拉框。

Select选择框 - 图10

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  5. ​
  6. function handleChange(value) {
  7.   console.log('[combo]', value);
  8. }
  9. ​
  10. const { Option } = Select;
  11. ​
  12. class App extends React.Component {
  13.   state = {
  14.     value: 'fox',
  15.   }
  16.   ds = new DataSet({
  17.     autoCreate: true,
  18.     fields: [
  19.       { name: 'name', defaultValue: 'fox2' },
  20.     ],
  21.   });
  22.   handleChange = (value) => {
  23.     console.log('[combo]', value);
  24.     this.setState({
  25.       value,
  26.     });
  27.     this.ds.current.set('name', value);
  28.   }

多值

通过属性multiple设置为多值。

Select选择框 - 图11

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  5. ​
  6. function handleChange(value, oldValue) {
  7.   console.log('[multiple]', value, '[oldValue]', oldValue);
  8. }
  9. ​
  10. function handleDataSetChange({ record, name, value, oldValue }) {
  11.   console.log(
  12.     '[dataset multiple]',
  13.     value,
  14.     '[oldValue]',
  15.     oldValue,
  16.     `[record.get('${name}')]`,
  17.     record.get(name),
  18.   );
  19. }
  20. ​
  21. const { Option } = Select;
  22. ​
  23. const data = [
  24.   {
  25.     user: ['wu'],
  26.   },
  27. ];
  28. ​
  29. class App extends React.Component {
  30.   ds = new DataSet({
  31.     data,
  32.     fields: [
  33.       {
  34.         name: 'user',
  35.         type: 'string',
  36.         textField: 'text',
  37.         label: '用户',

选项级联

选项级联。

Select选择框 - 图12

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  5. ​
  6. function handleDataSetChange({ record, value, oldValue }) {
  7.   console.log('[dataset]', value, '[oldValue]', oldValue, '[record.toJSONData()]', record.toJSONData());
  8. }
  9. ​
  10. class App extends React.Component {
  11.   ds = new DataSet({
  12.     autoCreate: true,
  13.     fields: [
  14.       {
  15.         name: 'sheng',
  16.         label: '省',
  17.         lookupCode: 'SHENG',
  18.         valueField: 'codeValueId',
  19.         defaultValue: '10206',
  20.       },
  21.       {
  22.         name: 'shi',
  23.         type: 'number',
  24.         valueField: 'codeValueId',
  25.         label: '市',
  26.         lookupCode: 'SHI',
  27.         cascadeMap: { parentCodeValueId: 'sheng' },
  28.       },
  29.     ],
  30.     events: {

非原始值

非原始值。

Select选择框 - 图13

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

optionRenderer 输入属性

使用optionRenderer属性。

Select选择框 - 图14

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { DataSet, Select, Button, Row, Col, Menu, Tooltip, Icon } from 'choerodon-ui/pro';
  5. ​
  6. const Item = Menu.Item;
  7. ​
  8. const App = () => {
  9.   const optionDs = new DataSet({
  10.     selection: 'single',
  11.     queryUrl: '/dataset/user/queries',
  12.     autoQuery: true,
  13.   });
  14. ​
  15.   const ds = new DataSet({
  16.     fields: [
  17.       {
  18.         name: 'user',
  19.         type: 'string',
  20.         textField: 'name',
  21.         valueField: 'userid',
  22.         label: '用户',
  23.         options: optionDs,
  24.       },
  25.     ],
  26.   });
  27. ​
  28.   const renderer = ({ text }) => (
  29.     <div style={{ width: '100%' }}>
  30.       {text && <Icon type="people" />} {text}

常用项

设置常用项。

Select选择框 - 图15

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

DataSet group 分组

DataSet group 分组。

Select选择框 - 图16

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. ​
  5. import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';
  6. ​
  7. const App = () => {
  8.   const optionDs = new DataSet({
  9.     selection: 'single',
  10.     queryUrl: '/common/lov/dataset/LOV_CODE',
  11.     fields: [{ name: 'enabledFlag', type: 'string', group: 0 }],
  12.     autoQuery: true,
  13.   });
  14. ​
  15.   const ds = new DataSet({
  16.     fields: [
  17.       {
  18.         name: 'code',
  19.         type: 'string',
  20.         textField: 'description',
  21.         valueField: 'code',
  22.         label: '用户',
  23.         options: optionDs,
  24.       },
  25.     ],
  26.   });
  27. ​
  28.   return (
  29.     <Row gutter={10}>
  30.       <Col span={8}>
  31.         <Select dataSet={ds} name="code" />
  32.       </Col>
  33.     </Row>
  34.   );

API

Select

参数说明类型默认值
combo复合输入值booleanfalse
searchable是否可搜索booleanfalse
reverse是否显示多选反向booleantrue
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
commonItem设置常用项Array<string>
maxCommonTagPlaceholder设置常用项标签超出最大数量时的占位描述ReactNode | (restValues) => ReactNode
maxCommonTagCount设置常用项标签最大数量number
maxCommonTagTextLength设置常用项标签文案最大长度number
noCache下拉时自动重新查询，不缓存下拉数据源boolean
selectAllButton多选模式下，是否显示全选按钮booleantrue

更多属性请参考 TriggerField。

Select.OptGroup

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

Select.Option

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