主要是由于下拉数据获取数据源数据量太多影响界面加载速度、用户体验非常不好
初始化 courseOptions 默认20条左右
-
前端代码
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 js 调用api
export function resCourseList(data, page) { const pageUrl = '/api/xxx/page/' + page.pageIndex + '/' + page.pageSize return request({ url: pageUrl, method: 'post', data }) }
-
后端写一个查询接口接口 … 这里我就不贴代码了