当`el-select`组件中的数据量过大时，可能导致页面卡顿。通过监听滚动事件并动态加载数据，实现了分批加载选项，有效改善了用户体验。在模板中定义了`el-select`组件，并使用自定义指令`el-select-loadmore`来实现滚动加载更多数据的功能。在`created`钩子中生成了100000条模拟数据，并在`loadMore`方法中增加了加载范围。
<template>
<div class="content">
<el-select
size="small"
v-model="choose"
placeholder="请输入搜索内容"
clearable
v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)"
>
<el-option
v-for="(item, index) in list.slice(0, rangeNumber)"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
list: [],//展示在下拉框内的数据
choose: "",
rangeNumber: 20
}
},
最低0.47元/天 解锁文章
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
