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

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

export default {
  data () {
    return {
      disabled: false,
      options: [],
    };
  },
  methods: {
    onChange (value) {
      console.log('onChange', value);
      let options = [];
      if (value) {
        if (value.indexOf('@') >= 0) {
          options = <Option key={value}>{value}</Option>;
        } else {
          options = ['gmail.com', 'yahoo.com', 'outlook.com'].map((domain) => {
            const email = `${value}@${domain}`;
            return <Option key={email}>{email}</Option>;
          });
        }
      }
      this.options = options;
    },
    onSelect (v) {
      console.log('onSelect', v);
    },
  },

  render () {
    return (<Select
      combobox
      notFoundContent={false}
      style='width: 200px'
      onChange={this.onChange}
      onSelect={this.onSelect}
      placeholder='请输入账户名'
    >
      {this.options}
    </Select>);
  },
};
</script>