2、编写 select-virtual-list 组件 这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 select-virtual-list。 新建文件 src\components\SelectVirtualList\index.vue <template>...
项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
在Vue2中给el-select添加虚拟滚动,可以有效解决大数据量时渲染卡顿的问题。以下是实现步骤,包括安装虚拟滚动库、配置和引入、在el-select中应用虚拟滚动等。 1. 安装虚拟滚动库 推荐使用vue-virtual-scroller这个库来实现虚拟滚动。你可以通过npm来安装它: bash npm install vue-virtual-scroller --save 2. 引入和...
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"> <virtual-list style="max...
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” 渲...
1、安装插件 npm install vue-virtual-scroll-list --save 2、引入组件virtualSelect,放置在components里面 3、局部注册组件或全局注册组件 virtualSelect 4、页面使用 // virtualSelect替换el-select<virtualSelectstyle="width: 300px"v-model="form.yp":selectData="{ ...
第一个坑:在 Element Plus 的<el-select>组件中,@scroll.native确实不会起作用,因为它是一个封装的组件,不直接暴露原生的滚动事件。为了实现下拉框的滚动加载功能,你需要使用@visible-change事件来监听下拉框的显示状态,并在下拉框打开时添加滚动事件监听器。
网上插件很多,不重复造轮子了,本次案例使用的插件 vue-virtual-scroll-list,详细参数配置请查看官网 要实现大数据量的展示和勾选 1.核心点在vue的 mixins 中注册事件 dispatch (这是官网的案例代码); 2.在组件中使用 $on 订阅虚拟滚动插件 data-component 的勾选事件; 3.在虚拟列表的子组件中,在mounted钩子改...
网上插件很多,不重复造轮子了,本次案例使用的插件vue-virtual-scroll-list,详细参数配置请查看官网 要实现大数据量的展示和勾选 1.核心点在vue的mixins中注册事件 dispatch (这是官网的案例代码); 2.在组件中使用$on订阅虚拟滚动插件 data-component 的勾选事件; ...
@_可以参考这个demo:https://xiaocheng555.github.io/el-table-virtual-scroll/#/Rows... 2023-07-27 while: 作者大大,我想问个问题,用v-if修饰了组件包裹的el-table后,虚拟滚动就不会生效了,这个怎么解决呢 2023-08-09来自四川 。qrsu2: 使用树形懒加载表格, @select-all="onSelectAll" 不生效?