vue+ant design中select选择框支持模糊查询
当我选择select去选择数据的时候,因为数据太多,所以要支持模糊检索代码是这样的;<a-form-itemlabel="案件类别":label-col="{ span: 5 }":wrapper-col="{ span: 12 }"><a-selectv-decorator="['charge',{.
·
当我选择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 来进行匹配。
更多推荐
已为社区贡献12条内容
所有评论(0)