ant design vue 中select搜索和远程数据结合(vue2写法)
select搜索和远程数据结合
·
需求:输入“房间号”,下拉实时查询内容,选择对应房间。
需要用到select的搜索和远程数据结合
框架是ant design vue的V2版本, 用的Vue2写法.(看了ant原生框架,写法不一样,我这个比较容易理解)
下面是测试数据效果图:
具体代码
<a-select
v-model:value="values"
:default-active-first-option="false"
:filter-option="false"
:not-found-content="null"
:options="options"
:show-arrow="false"
placeholder="请输入名称"
show-search
style="width: 250px"
@search="handleSearch"
@change="roomChange"
>
</a-select>
踩坑:绑定的Id值为 undefined,才会显示placeholder。 (非常坑)
data() {
return {
options:[], //房间下拉列表
values:undefined, //绑定的Id值 undefined才会显示placeholder
}
}
methods: {
//下拉列表
async handleSearch(val){
console.log(val)
this.options=[];
//下拉模糊查询
const res = await ReportApi.getRoom({ //请求的API
doorNumber: val,
});
console.log(res);
res.data.forEach((item) => {
this.options.push({ //循环,把值装进去
value: item.id,
label: item.roomName,
});
});
},
roomChange(val){
console.log(val);
},
}
写法很简单,就是看框架麻烦一点。 如果对你有帮助,点个赞呗!
更多推荐
已为社区贡献8条内容
所有评论(0)