体验el-select的远程搜索功能 需求描述 没有什么技术难度,需求如下,要求上来默认加载几个选项,然后根据用户的输入,实时更新选项,且支持用户新增。(请看gif) 解决方案 首先要找到了el-select组件,然后里面有一个远程搜索功能。 官方文档:https://element-plus.org/zh-CN/component/select.html 代码如下: <el-select...
这样就实现了el-select下拉框数据的懒加载,注意: 如果和我一样下拉框里的选项(比如这里的allData)是动态变化的,在每次获取新的数据之后要把pageData里的数据还原,即在获取数据的方法里加上这两句: this.pageData.pageIndex = 1; this.pageData.pageSize = 20; 否则每次获取完新的数据之后只是从上一次加载到的...
// 懒加载loadmoreData(){if(this.loadmore){this.page.current=this.page.current+1;this.getShopList();}}, // //店铺选择changeShopInfo(e){this.shopId=e;}, remoteMethod(query){this.keyWord=queryif(query!=""){this.loading=true;getShopList({current:1,size:12,name:query}).then((res)=>{...
首先是全局指令: /** * el-select加载事件(可用于做select的无限滚动) * 使用方法(两种方法,推荐第2种): * 1. 查询方法自定义(远程搜索也需要自定义): * v-load-more.method="function(){}" * 2. 传入url就可实现无限滚动和远程搜索,要求接口分页参数为“pageSize”和“pageNo”:...
data() { return { selectedValue: '', options: [] }; }, methods: { loadOptions(query) { // 异步加载选项数据 // 将数据赋值给this.options } } 增加搜索功能:如果允许用户搜索选项,可以使用el-select的搜索功能。通过给el-select设置filterable属性为true,用户可以通过输入关键字来筛选选项,从而减少渲...
组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中. 某组件中: <template><el-selectv-model="value"placeholder="请选择"filterablemultiplev-el-select-loadmore="loadmore"><el-optionv-for="item in ...
value(); }); } } }, /** * 客户搜索框触发远程搜索 * @params query 客户搜索模糊 参数 * */ remoteMethod(query) { /** 滚动条还原 */ this.$refs.customerRef.$children[1].$children[0].wrap.scrollTop = 0; this.$refs.customerRef.$children[1].$children[0].moveY = 0; /** 每次...
el-select数据过多懒加载(loadmore) el-select数据过多处理方式 在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. 远程搜索 组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒加载loadMore...
第二种 远程搜索<template> <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> <...