Ant Design Vue 下拉框（带查询和验证）

<template>
  <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">   
    <a-form-model-item label="爱好" prop="title">
      <!-- <a-input v-model.number="ruleForm.age" /> -->
      <a-select
        show-search
        placeholder="请填写"
        option-filter-prop="children"
        style="width: 200px"
        v-model="ruleForm.title"
      >
        <a-select-option
          v-for="item in selectList"
          :key="item.id"
          :value="item.title"
        >
          {{ item.title }}
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <a-form-model-item label="Age" prop="age">
      <!-- <a-input v-model.number="ruleForm.age" /> -->
      <a-select
        show-search
        placeholder="Select a person"
        option-filter-prop="children"
        style="width: 200px"
        v-model="ruleForm.age"
      >
        <a-select-option
          v-for="item in dataList"
          :key="item.id"
          :value="item.title"
        >
          {{ item.title }}
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="submitForm('ruleForm')">
        Submit
      </a-button>
      <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
        Reset
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    let checkAge = (rule, value, callback) => {
       if (value === '') {
        callback(new Error('不能为空'));
      } else {
        callback();
      }
    };
// :rules="rules"  表单验证规则（model）   validator 自定义校验  被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）
    // prop="title"  放在每一项中的
     // show-search   设置可以查询下拉列表的数据
     
    return {
      dataList: [
        {
          title: "张三",
          id: "1",
        },
        {
          title: "李四",
          id: "2",
        },
        {
          title: "王五",
          id: "3",
        },
        {
          title: "赵六",
          id: "4",
        },
      ],
      selectList: [
        {
          title: "篮球",
          id: "1",
        },
        {
          title: "足球",
          id: "2",
        },
        {
          title: "橄榄球",
          id: "3",
        },
      ],
      ruleForm: {
        age: "",
        title: "",
      },
      rules: {
        age:[{ validator: checkAge, trigger: "change" }],
        title:[{ validator: checkAge, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
    };
  },
  methods: {
    submitForm(formName) {
      console.log(this.ruleForm,'ruleForm')
      this.$refs[formName].validate((valid) => {
        if (valid) {
           return false;
        } 
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

效果图