el-select 结合 vue-virtual-scroll-list 可以显著提升大数据量下拉框的性能。 在Vue 项目中,当 el-select 组件需要处理大量数据时,直接使用会导致性能问题,如下拉框加载速度慢、卡顿甚至卡死。为了解决这个问题,可以使用 vue-virtual-scroll-list 插件来实现虚拟滚动。 1. 安装 vue-virtual-scroll-list 首先,你需...
VirtualSelect.vue <template> <div> <el-select popper-class="virtualselect" class="virtual-select-custom-style" :value="defaultValue" filterable :filter-method="filterMethod" default-first-option clearable :placeholder="placeholder" :disabled="disabled" :multiple="isMultiple" :allow-create="allowCrea...
1<el-select filterable :filter-method="filterMethod" @visible-change="visibleChange" >2</el-select>34//搜索5filterMethod(query) {6if(query !== '') {7this.$refs.virtualList.scrollToIndex(0);//滚动到顶部8setTimeout(() =>{9this.selectArr =this.selectData.data.filter(item =>{10retur...
data-component=“itemComponent” 就是抽离中的el-option组件 keeps=“20” 渲染的个数 extra-props 值为对象,可以传入自定义属性进去 高度设置 .virtualselect { // 设置最大高度 &-list { max-height:245px; overflow-y:auto; } .el-scrollbar .el-scrollbar__bar.is-vertical { width: 0; } } 原...
const el = document.querySelector('#list>div') Sortable.create(el, { onMove: (evt) => { const { dragged, related } = evt; console.log(dragged, related); // 拿到拖动元素和交换位置的相关元素,可做一些操作,比如某些条件下禁止拖动排序 }, }); }, methods: {}, }; </script> <style>...
</el-select> 显性的子组件和v-for,以及直观的key值。 优化后的表现 结果显而易见。火焰图不够红火了!不再卡顿。 实现原理 那么它的实现原理是什么呢? 下面是一张3d图,表示了数据实际展示的范围。 由此可知,根据滚动容器元素的可视窗口来渲染长列表中的部分数据。利用视差和错觉制作一份出一份“虚拟”列表,...