可搜索的下拉框---含配合表单做校验的

<template>
  <a-select
    show-search
    placeholder="Select a person"
    option-filter-prop="children"(这个好像不用也行)
    style="width: 200px"
    :filter-option="filterOption"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
  >
    <a-select-option value="jack">
      Jack
    </a-select-option>
    <a-select-option value="lucy">
      Lucy
    </a-select-option>
    <a-select-option value="tom">
      Tom
    </a-select-option>
  </a-select>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

参考: https://www.antdv.com/components/select-cn/#Select-

 

 

下拉框做校验(配合from表单的 没有试过 )

<a-select

show-search

placeholder="请选择对应host"

option-filter-prop="children"

:filter-option="filterOption"

v-decorator="[

'st_host',

{

rules: [{ required: true, message: '输入对应的host',trigger:'blur' }],

},

]"

 

style="width: 100%"

>