目录
一、概述
select组件一般加载几百条数据就会出现卡顿现象，原因是antd vue的select组件针对加载大量数据的情况，暂时没做优化，因此每次点击select组件都会出现卡顿。本文将已纯前端的方式解决该问题。
二、详解
方案：初始加载一部分数据，后续随滚动条滚动陆续加载。
步骤一：模板代码
<a-select
v-model="demoValue"
show-search
option-filter-prop="children"
@popupScroll="handlePopupScroll"
@search="handleSearch"
@select="handleSelect"
@dropdownVisibleChange="handleDropdownVisibleChange"
>
<a-select-option
v-for="data in arrs"
:key="data.id"
>
{
{ data.name }}
</a-select-option>
</a-select>步骤二：基本参数
<script>
// debounce可用来创建一个防抖函数
import debounce from 'lodash/debounce';
export default {
data() {
return {
arrs: [], // 数据源, 页面初始加载时直接访问接口获得
showList: [], // 下拉框实时展示的数据
filterDataList: [], // 使用过滤条件后，下拉框展示的数据源
searchText: '' // 下拉框的筛选条件
}
}
};
</script>步骤三：创建原始数据监听器
<script>
export default {
watch: {
// 监听原始数据的变动，及时更新下拉框展示数据
arrs: {
handler(newValue) {
this.showList = newValue.slice(0, 10);
},
immediate: true
}
}
};
</script>步骤四：滚动条的回调函数
<script>
export default {
methods: {
handlePopupScroll: debounce(function () {
if (this.searchText === '') {
this.loadMoreData(this.arrs);
} else {
// 存在过滤条件时，从filters数据源中加载数据
this.loadMoreData(this.filterDataList);
}
}, 400)
}
};
</script>步骤五：文本框值变化时的回调函数
<script>
export default {
methods: {
handleSearch(val) {
this.searchVText = val;
let temp = [];
if (val) {
temp = this.arrs.filter(p => p.name.indexOf(val) > -1);
} else {
temp = this.arrs;
}
this.filterDataList = temp ;
this.showList= temp .length < 10 ? temp : temp .slice(0, 10);
}
}
};
</script>步骤六：被选中时的回调函数
<script>
export default {
methods: {
handleSelect(val) {
// 选中的数据
const selected = (this.arrs).filter(item => item.code === val);
// 没有选中的数据
const noSelected = (this.arrs).filter(item => item.code !== val);
// 重新调整原始数据，选中的排在第一位
this.arrs = selected.concat(noSelected);
// 清空查询条件
if (this.searchText) {
this.searchText = '';
}
}
}
};
</script>步骤七：下拉框打开时的回调函数
<script>
export default {
methods: {
handleDropdownVisibleChange(open) {
if (open) {
// 下拉框打开时重置展示的数据
this.showList= this.arrs.slice(0, 10);
}
}
}
};
</script>步骤八：更新下拉框展示的数据
<script>
export default {
methods: {
loadMoreData(dataList) {
// 已渲染的下拉列表长度
const length = this.showList.length;
// 当前数据源的长度
const total = dataList.length;
// 新加载的数据
let addList = [];
if (length < total) {
if (length + 10 <= total) {
addList = dataList.slice(length, length + 10);
} else {
addList = dataList.slice(length, length + (total % 10));
}
// 更新下拉框展示的数据
this.showList= (this.showList).concat(addList);
}
}
}
};
</script>