解决方案：
最开始渲染时只渲染总数据前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后通过select下拉框popupScroll事件，下拉列表滚动时的回调，每次回调时都添加一部分数据来解决下拉框的卡顿问题。
Ant Design of Vue 官网文档事件方法：
image.png
效果图：
image.png
代码部分：
html:
<a-select v-model="formData_promql.name" show-search style="width: 300px" option-filter-prop="children"
:disabled="btnType === 'detail'" @popupScroll="handlePopupScroll" @search="handleSearch"
@change="handlePromqlChange">
<a-select-option v-for="item in frontDataZ" :key="item" :value="item">
{{ item }}
</a-select-option>
</a-select>
js:
(1).data中定义变量与数组
data(){
return {
dataZ: [],//总数据（不会改变）
frontDataZ: [], //存放前100的数据
sourceOwnerSystems: [],
valueData: '',
treePageSize: 100,
scrollPage: 1
}
}
(2).methods：
//通过接口获取数据
searchOwnerPromql(name) {
Http_alarm_rule_promql_list({ envCode: localRead(this.$config.envvalue), resourceType: this.formData.resourceType }).then(res_staff => {
if (res_staff && res_staff.data && res_staff.data.data && res_staff.data.data.data) {
let arr = [];
res_staff.data.data.data.forEach((item) => {
arr.push(item);
})
this.arr_promql = arr;
this.frontDataZ = arr.slice(0, 100) // 只渲染100条数据
}
})
},
// 搜索的时候执行的方法，val就是输入的时候的内容，可以去后端进行查询数据最后赋值给dataZ或者frontDataZ
handleSearch(val) {
this.valueData = val
if (!val) {
this.searchOwnerPromql()
} else {
this.frontDataZ = []
this.scrollPage = 1
this.arr_promql.forEach(item => {
if (item.indexOf(val) >= 0) {
this.frontDataZ.push(item)
}
})
this.allSearchDataZ = this.frontDataZ
this.frontDataZ = this.frontDataZ.slice(0, 100) // 只渲染100条数据
}
}
// 下拉框下滑事件
handlePopupScroll(e) {
const { target } = e
const scrollHeight = target.scrollHeight - target.scrollTop
const clientHeight = target.clientHeight
// 下拉框不下拉的时候
if (scrollHeight === 0 && clientHeight === 0) {
this.scrollPage = 1
} else {
// 当下拉框滚动条到达底部的时候
if (scrollHeight < clientHeight + 5) {
this.scrollPage = this.scrollPage + 1
const scrollPage = this.scrollPage// 获取当前页
const treePageSize = this.treePageSize * (scrollPage || 1)// 新增数据量
const newData = [] // 存储新增数据
let max = "" // max 为能展示的数据的最大条数
if (this.arr_promql.length > treePageSize) {
// 如果总数据的条数大于需要展示的数据
max = treePageSize
} else {
// 否则
max = this.arr_promql.length
}
// 判断是否有搜索
if (this.valueData) {
this.allSearchDataZ.forEach((item, index) => {
if (index < max) { // 当data数组的下标小于max时
newData.push(item)
}
})
} else {
this.arr_promql.forEach((item, index) => {
if (index < max) { // 当data数组的下标小于max时
newData.push(item)
}
})
}
this.frontDataZ = newData // 将新增的数据赋值到要显示的数组中
}
}
},
