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=true
	this.$post({
		_method:'XXXX',  // 接口地址
		title:e,   // 根据title关键字筛选
		pageNum: 1,
		pageSize: 100
	}).then(res => {
		if(res.code === 200){
			this.loading1=false
			this.goodsLists = res.data.list
		}
	}).catch((res) => {})
},
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值