ant-design-vue组件填坑记

表单中使用select选择框支持模糊查询

后端返回的数据格式为:

chargeData: [
    {
        id: 1,
        name: '广州'
    }，
    {
        id: 2,
        name: '河南'
    }
]

需要支持搜索，显示的值为 name，回传给表单的值为 id。不作处理，直接绑定value的话，搜索条件也是value的绑定值，并且回传给表单的也是value的绑定值，这个显然不是我们想要的，所以需要作点小修改

关键代码是在select上加上
:filterOption=“filterOption”
:allowClear=“true” //支持清空

代码：

// 模板代码
<a-form-item
          label="案件类别"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select 
          v-decorator="[
            'charge', 
             {rules: [{ required: true, message: '案件类别' }]}]"
              :filterOption="filterOption"
              :allowClear="true"
            >
          <a-select-option  v-for="item in chargeData" :key="item.id" >
              {{item.text}}
          </a-select-option>
        </a-select>
  </a-form-item>

// methods
methods: {
    filterOption(input, option){
      return (
       option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
}