1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > iviewUI选择下拉框 输入搜索词调用接口远程搜索

iviewUI选择下拉框 输入搜索词调用接口远程搜索

时间:2019-12-22 03:52:06

相关推荐

iviewUI选择下拉框 输入搜索词调用接口远程搜索

使用场景:

项目使用中,遇到下拉框数据超过千条,甚至万条的数据,会崩溃,不能直接展示完,又不能分页选择

;所以最后改成输入搜索词,调用接口进行远程搜索

如图:

输入关键字,调用接口返回数据,选择想要的数据

默认是暂无数据

代码:

<Select placeholder='请输入商品名称选择' :remote-method="remoteMethod" @on-query-change='getAllGoods' :loading="loading1" filterable v-model="modifyFromColumn.hyperlink_id"><Option v-for="(item) in goodsLists" :value="item.code" :key="item.code">{{ item.title }}</Option></Select>

remote-method方法只是个摆设,什么也不做,但是必须要有,实际上用到的是on-query-change事件

官网上并没有写这两个事件有什么关联的地方,但是私下试了试,单个使用会有问题,至于为什么,不知道,有知道的小伙伴可以私戳我

方法:

remoteMethod(){}, getAllGoods(e){this.loading1=truethis.$post({_method:'XXXX', // 接口地址title:e, // 根据title关键字筛选pageNum: 1,pageSize: 100}).then(res => {if(res.code === 200){this.loading1=falsethis.goodsLists = res.data.list}}).catch((res) => {})},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。