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

花笙_

于 2022-09-06 14:51:10 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/wang_59881/article/details/126724493

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文讲述了在项目中遇到大量数据下拉框性能瓶颈的问题，通过实现输入搜索并调用接口远程获取数据，有效解决了显示和选择问题。作者分享了相关代码和关键事件处理方法，展示了如何在实际开发中应对大数据筛选的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：
项目使用中，遇到下拉框数据超过千条，甚至万条的数据，会崩溃，不能直接展示完，又不能分页选择
；所以最后改成输入搜索词，调用接口进行远程搜索
如图：
在这里插入图片描述
输入关键字，调用接口返回数据，选择想要的数据
默认是暂无数据
代码：

<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) => {})
},