ant-design-vue/components/vc-select/demo/optgroup.vue

<script>
import Select, { Option, OptGroup } from '../index';
import '../assets/index.less';

export default {
  methods: {
    onChange(value, option) {
      console.log(`selected ${value}`, option);
    },
  },

  render() {
    return (
      <div>
        <h2>Select OptGroup</h2>
        <div style={{ width: '300px' }}>
          <Select
            placeholder="placeholder"
            defaultValue="lucy"
            showSearch={false}
            style={{ width: '500px' }}
            onChange={this.onChange}
          >
            <OptGroup>
              <span slot="label">manager</span>
              <Option value="jack" test-prop="jack-prop">
                <b
                  style={{
                    color: 'red',
                  }}
                >
                  jack
                </b>
              </Option>
              <Option value="lucy" test-prop="lucy-prop">
                lucy
              </Option>
            </OptGroup>
            <OptGroup label="engineer">
              <Option value="yiminghe" test-prop="yiminghe-prop">
                yiminghe
              </Option>
            </OptGroup>
          </Select>
        </div>
      </div>
    );
  },
};
</script>