element下拉框el-select加载数据太多 自定义方法查询_el-select创建条目可多选带搜索数据太多,点击下拉框展开太慢

主要是由于下拉数据获取数据源数据量太多影响界面加载速度、用户体验非常不好

初始化 courseOptions 默认20条左右

1. 前端代码
   1.1 界面控件加载 主要是定义检索方法： filter-method

    	<el-select v-model="scheduleInfo.courseId" filterable  **:filter-method="courseFilter"**  placeholder="请选择" style="width:100%;" clearable size="mini">
    		<el-option v-for="item in courseOptions" :key="item.id" :label="item.courseName" :value="item.id"></el-option>
    	</el-select>
       
     
       courseFilter(courseVal){     //  搜索
    		// if(courseVal){
    			this.courseDto.courseName = courseVal
    			resCourseList(this.courseDto, this.coursePage).then(response=>{
    				var courseArr = response.data.records
    				if(courseArr){
    					this.courseOptions = courseArr
    				}
    			})    
    		// }
    	},
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

   1.2 js 调用api

    export function resCourseList(data, page) {
    	const pageUrl = '/api/xxx/page/' + page.pageIndex + '/' + page.pageSize
    	return request({
    	  url: pageUrl,
    	  method: 'post',
    	  data
    	})
    }
   1
   2
   3
   4
   5
   6
   7
   8

2. 后端写一个查询接口接口 … 这里我就不贴代码了