vue+ant design中select选择框支持模糊查询

当我选择select去选择数据的时候，因为数据太多，所以要支持模糊检索
代码是这样的；

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

关键代码是在select上加上
:filterOption=“filterOption”
showSearch //点击可输入内容，搜索option对应的value的值
:allowClear=“true” //支持清空

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

filterOption 第二个参数直接返回原数据，不在需要通过 option.props.children 来进行匹配。