项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-v
Smooth scrolling for any amount of data. Latest version: 1.1.2, last published: a year ago. Start using vue-virtual-scroll-plugin in your project by running `npm i vue-virtual-scroll-plugin`. There are no other projects in the npm registry using vue-virt
在vue项目的plugins插件目录下创建virtual-scroll目录,并将VirtualScroll.vue文件放入该目录下,然后创建index.js文件。 index.js文件 importVirtualScrollfrom'./VirtualScroll.vue'functioninstall(Vue){ Vue.component('VirtualScroll', VirtualScroll); }exportdefault{ install } 4在vue项目中使用 4.1 安装虚拟滚动插件...
Smooth scroll with any amount of data. Contribute to simplesmiler/vue-virtual-scroller development by creating an account on GitHub.
所以大大节省了系统资源,提升了用户体验。 我在GitHub上找了几个基于Vue.js 的虚拟列表实现,最终找到了一个最合适的vue-virtual-scroll-list,并在项目中进行了使用。 我在闲暇之余研读了一下此项目的代码,发现实现方式比想象中还要简单。 核心实现 this.$slots.default类型为数组,存储的是此组件两标签中的内容,...
import Vue from "vue"; import { VirtualScroll } from "virtual-scroll-vue-slot"; Vue.use(VirtualScroll);local component <template> <virtual-scroll-vue style="height: 200px" :parent="{ tag: 'ItemsWrapper', props: { class: 'test-class', props: { value: vmTest }, on: { input:...
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” 渲...
简介: Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题 1. 简介 vue-virtual-scroll-list npm 地址 vue-virtual-scroll-list 主页 安装 npm i vue-virtual-scroll-list 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览...
1.安装 cnpm/npm install vue-virtual-scroll-list --save 2.引入下载好的组件,并注册组件 import virtualList from 'vue-virtual-scroll-list' 3.注意版本1.x和2.x使用方式不同、api也不同 使用方式: <template> <virtual-list style="height: 360px; overflow-y: auto;" :data-...
npm install vue-virtual-scroll-list --save 1. 代码: VirtualSelect.vue <template> <el-select popper-class="virtualselect" class="virtual-select-custom-style" :value="defaultValue" filterable :filter-method="filterMethod" default-first-option clearable...