需求：
在项目中一个查询下拉框中需要展示10000条数据，这10000条数据去后端查询虽然比较快，但是将查询结果返回给前端需要进行渲染，前端就会造成卡顿的现象，这时候就可以使用滑动加载只渲染总数据前100条数据以保证不卡顿。
解决方案
需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后通过select下拉框popupScroll事件，下拉列表滚动时的回调，每次回调时都添加一部分数据来解决下拉框的卡顿问题。 同时对下拉框实现一个模糊查询的功能，数据过多查找不方便的问题。
具体代码
HTML：
<a-selectv-model="queryParam.batchCode"placeholder="请选择"allowClearshowSearchoptionFilterProp="label"@popupScroll="handlePopupScroll"@search="handleSearch"><a-select-option v-for ="(tValue,index) in frontBatchCode":value = "tValue":key = "index":label = "tValue"> {{ tValue }}</a-select-option></a-select>
js部分：
（1）data中定义的数据和变量
data(){return {listBatchCode: [],//batchCode的总数据（不会改变）frontBatchCode: [], //存放前100的数据allData: [],valueData: '', //batchCode输入或选择的值treePageSize: 100,scrollPage: 1,url:{batchCodeList: "/batch/component/allBatchCode"}}}
（2）方法：
//服务码查询getBatchCode(){getAction(this.url.batchCodeList).then((res){if(res.success){this.listBatchCode = res.resultthis.frontBatchCode = res.result.slice(0,100)}else{this.$message.error(res.message)}})},handleSearch (val) {this.valueData = valif (!val) {this.getBatchCode()} else {this.frontBatchCode = []this.scrollPage = 1this.listBatchCode.forEach(item => {if (item.indexOf(val) >= 0) {this.frontBatchCode.push(item)}})this.allData = this.frontBatchCodethis.frontBatchCode= this.frontBatchCode.slice(0, 100)}},//下拉框下滑事件handlePopupScroll (e) {const {target } = econst scrollHeight = target.scrollHeight - target.scrollTopconst clientHeight = target.clientHeight// 下拉框不下拉的时候if (scrollHeight === 0 && clientHeight === 0) {this.scrollPage = 1console.log(this.scrollPage)} else {// 当下拉框滚动条到达底部的时候if (scrollHeight < clientHeight + 5) {this.scrollPage = this.scrollPage + 1const scrollPage = this.scrollPage// 获取当前页const treePageSize = this.treePageSize * (scrollPage || 1)// 新增数据量const newData = [] // 存储新增数据let max = '' // max 为能展示的数据的最大条数if (this.listBatchCode.length > treePageSize) {// 如果总数据的条数大于需要展示的数据max = treePageSize} else {// 否则max = this.listBatchCode.length}// 判断是否有搜索if (this.valueData) {this.allData.forEach((item, index) => {if (index < max) {// 当data数组的下标小于max时newData.push(item)}})} else {this.listBatchCode.forEach((item, index) => {if (index < max) {// 当data数组的下标小于max时newData.push(item)}})}this.frontBatchCode= newData // 将新增的数据赋值到要显示的数组中}}},//查询后重置调的方法searchResetNew(){this.getBatchCode()this.valueData = ''.....}
