cnd-components-mcp/componentData/components/Select/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例
```tsx
import React from 'react';
import { Select } from '@alicloud/console-components';

const onChange = (value: any) => {
  console.log(value);
};
export const dataSource = [
  {
    value: '10001',
    label: '选项A',
  },
  {
    value: '10002',
    label: '选项B',
  },
];
const h4Style = {
  fontSize: '12px',
  marginTop: '24px',
};

export default () => {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      <div style={{ marginRight: '78px' }}>
        <h4 style={h4Style}>默认32px</h4>
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="medium"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h4 style={h4Style}&gt;大号36px&lt;/h4&gt;
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="large"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h4 style={h4Style}&gt;小号24px&lt;/h4&gt;
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="small"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '尺寸',
  describe: '通过设置size属性，设置组件尺寸。',
};

```
```tsx
import React from 'react';
import { Form, Select } from '@alicloud/console-components';

const FormItem = Form.Item;
const onChange = (value: any) => {
  console.log(value);
};
const dataSource = [
  {
    value: '1',
    label: '默认项',
  },
  {
    value: '2',
    label: '聚焦项',
  },
  {
    value: '3',
    label: '选中项',
  },
  {
    value: '4',
    label: '默认项',
  },
  {
    value: '5',
    label: '失效项',
    disabled: true,
  },
];
const h4Style = {
  fontSize: '12px',
  marginTop: '24px',
};

export default () => {
  return (
    &lt;div style={{ display: 'flex', flexWrap: 'wrap' }}&gt;
      &lt;div&gt;
        &lt;h4 style={h4Style}&gt;默认&lt;/h4&gt;
        <Select
          placeholder="请选择"
          defaultValue="3"
          onChange={onChange}
          size="medium"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h4 style={h4Style}&gt;禁用&lt;/h4&gt;
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="medium"
          disabled
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h4 style={h4Style}&gt;错误&lt;/h4&gt;
        &lt;Form labelAlign="inset" inline&gt;
          <FormItem
            validateState="error"
            help="错误信息提示文字，上间距4px"
          >
            <Select
              placeholder="内容出错"
              state={'error'}
              dataSource={dataSource}
              style={{ marginTop: 20, width: 280 }}
            />
          &lt;/FormItem&gt;
        &lt;/Form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '基础形态交互',
  describe: '设置disabled属性，禁用组件；设置state属性，设置组件状态。',
};

```
```tsx
import React from 'react';
import { Select } from '@alicloud/console-components';

const onChange = (value: any) => {
  console.log(value);
};
export const dataSource = [
  {
    value: '1',
    label: '默认项',
  },
  {
    value: '2',
    label: '聚焦项',
  },
  {
    value: '3',
    label: '选中项',
  },
  {
    value: '4',
    label: '选中项',
  },
  {
    value: '5',
    label: '默认项',
  },
  {
    value: '6',
    label: '失效项',
    disabled: true,
  },
];
const h4Style = {
  fontSize: '12px',
  marginTop: '24px',
};

export default () => {
  return (
    &lt;div style={{ display: 'flex', flexWrap: 'wrap' }}&gt;
      &lt;div style={{ marginRight: '78px' }}&gt;
        &lt;h4 style={h4Style}&gt;默认&lt;/h4&gt;
        <Select
          placeholder="请选择"
          onChange={onChange}
          defaultValue={['3', '4']}
          dataSource={dataSource}
          style={{
            width: 280,
          }}
          mode="multiple"
        />
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h4 style={h4Style}&gt;禁用&lt;/h4&gt;
        <Select
          placeholder="请选择"
          onChange={onChange}
          defaultValue={['3', '4']}
          dataSource={dataSource}
          style={{
            width: 280,
          }}
          mode="multiple"
          disabled
        />
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '带多选标签形态交互',
  describe: '设置mode值为multiple，选择器为带多选标签形态。',
};

```
```tsx
import React from 'react';
import {
  Select,
  Input,
  Button,
  Icon,
  Divider,
} from '@alicloud/console-components';

const onChange = (value: any) => {
  console.log(value);
};
const dataSource1 = [
  {
    value: '1',
    label: '默认项',
  },
  {
    value: '2',
    label: '聚焦项',
  },
  {
    value: '3',
    label: '选中项',
  },
  {
    value: '4',
    label: '默认项',
  },
  {
    value: '5',
    label: '失效项',
    disabled: true,
  },
];
const dataSource = [
  { label: '内容描述，文案超出长度后允许自动换行，内容描述', value: '1' },
  { label: '内容描述，文案超出长度后允许自动换行，内容描述', value: '2' },
];
const menuProps1 = {
  focusable: false,
  header: (
    &lt;div style={{ padding: '0 4px', textAlign: 'center' }}&gt;
      &lt;div style={{ paddingBottom: 4 }}&gt;
        <Input
          size="small"
          placeholder="请输入内容"
          label={&lt;Icon type="search" /&gt;}
        />
      &lt;/div&gt;
    &lt;/div&gt;
  ),
  footer: (
    &lt;div style={{ padding: '0 4px', textAlign: 'center', margin: '0 -4px' }}&gt;
      &lt;Divider style={{ marginBottom: 0, marginTop: 4 }} /&gt;
      &lt;Button text type="primary"&gt;
        Load More...
      &lt;/Button&gt;
    &lt;/div&gt;
  ),
};
const menuProps2 = {
  focusable: false,
  header: (
    &lt;div style={{ padding: '4px 4px 0' }}&gt;
      &lt;div style={{ display: 'flex', paddingBottom: 4 }}&gt;
        <Input
          size="small"
          placeholder="请输入内容"
          label={&lt;Icon type="search" /&gt;}
        />
        &lt;Button size="small" style={{ marginLeft: '8px', width: '24px', padding: 0, flexShrink: 0 }}&gt;
          &lt;Icon type="arrow_circular" /&gt;
        &lt;/Button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ),
  footer: (
    &lt;div style={{ padding: '0 4px', margin: '0 -4px' }}&gt;
      &lt;Divider style={{ marginBottom: 0, marginTop: 4 }} /&gt;
      &lt;div style={{ paddingLeft: 8 }}&gt;
        &lt;Button text type="primary"&gt;
          前往创建ECS
        &lt;/Button&gt;
        &lt;Icon type="external" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ),
};
const menuProps3 = {
  focusable: false,
  header: (
    &lt;div style={{ padding: '4px 4px 0' }}&gt;
      &lt;div style={{ display: 'flex', paddingBottom: 4 }}&gt;
        <Input
          size="small"
          placeholder="请输入内容"
          label={&lt;Icon type="search" /&gt;}
        />
        &lt;Button size="small" style={{ marginLeft: '8px', width: '24px', padding: 0, flexShrink: 0 }}&gt;
          &lt;Icon type="arrow_circular" /&gt;
        &lt;/Button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ),
  footer: (
    &lt;div style={{ margin: '0 8px' }}&gt;
      搜索结果：没有找到相关实例
      &lt;Divider style={{ marginBottom: 0, marginTop: 4 }} /&gt;
      &lt;div&gt;
        无实例原因
        &lt;p&gt;
          1. A原因造成 &lt;a href="#"&gt;解决方案a&lt;/a&gt;
          &lt;br /&gt;
          2. B原因造成 &lt;a href="#"&gt;解决方案b&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ),
};
export default () => {
  return (
    &lt;div&gt;
      &lt;h4 style={{ fontSize: '12px' }}&gt;默认&lt;/h4&gt;
      <Select
        showSearch
        placeholder="请选择"
        onChange={onChange}
        dataSource={dataSource1}
        style={{
          width: '280px',
        }}
        mode="multiple"
        menuProps={menuProps1}
      />
      &lt;h4 style={{ fontSize: '12px', marginTop: '24px' }}&gt;带刷新搜索默认&lt;/h4&gt;
      <Select
        mode="multiple"
        dataSource={dataSource}
        style={{ width: '280px' }}
        menuProps={menuProps2}
        popupAutoFocus
      />
      &lt;h4 style={{ fontSize: '12px', marginTop: '24px' }}&gt;带刷新搜索无结果&lt;/h4&gt;
      <Select
        mode="multiple"
        style={{ width: '280px' }}
        menuProps={menuProps3}
        popupAutoFocus
        dataSource={[]}
      />
    &lt;/div&gt;
  );
};
export const meta = {
  title: '下拉带搜索形态',
  describe: '自定义 menuProps 实现下拉带搜索形态',
};

```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```