el-select 结合 vue-virtual-scroll-list 可以显著提升大数据量下拉框的性能。 在Vue 项目中,当 el-select 组件需要处理大量数据时,直接使用会导致性能问题,如下拉框加载速度慢、卡顿甚至卡死。为了解决这个问题,可以使用 vue-virtual-scroll-list 插件来实现虚拟滚动。 1. 安装 vue-virtual-scroll-list 首先,你需...
npm install vue-virtual-scroll-list --save 1. 代码: 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="d...
项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
2、编写 select-virtual-list 组件 这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 select-virtual-list。 新建文件 src\components\SelectVirtualList\index.vue <template>...
import virtualList from 'vue-virtual-scroll-list' components:{ 'virtual-list': virtualList }, 基础用法 属性说明 data-key=“selectData.value” 就是绑定的唯一key值,可传入动态的 data-sources=“selectArr” 下拉框的数组 data-component=“itemComponent” 就是抽离中的el-option组件 keeps=“20” 渲...
第一个坑:在 Element Plus 的<el-select>组件中,@scroll.native确实不会起作用,因为它是一个封装的组件,不直接暴露原生的滚动事件。为了实现下拉框的滚动加载功能,你需要使用@visible-change事件来监听下拉框的显示状态,并在下拉框打开时添加滚动事件监听器。
dynamic-virtual-list是列表的容器，绑定了滚动事件handleScroll。占位层的高度为总高度，用于模拟整个列表...
网上插件很多,不重复造轮子了,本次案例使用的插件vue-virtual-scroll-list,详细参数配置请查看官网 要实现大数据量的展示和勾选 1.核心点在vue的mixins中注册事件 dispatch (这是官网的案例代码); 2.在组件中使用$on订阅虚拟滚动插件 data-component 的勾选事件; ...
Vue3-Scroll一款使用vue3.x开发的类似饿了么模拟滚动条组件。开发灵感来自之前的vue2版本。 引入组件 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import{createApp}from'vue'importAppfrom'./App.vue'import'./index.css'// 引入滚动条组件v3scrollimportV3Scrollfrom'./components/v3scroll'createApp(Ap...
import virtualList from 'vue-virtual-scroll-list' // 注册组件 components: { 'virtual-list': virtualList } 1. 2. 3. 4. 5. 基础用法 一、要用这个插件去包裹需要循坏展示的标签。这里就是el-option标签 <el-select v-model="mediaAccount" popper-class="virtualSelect"> ...