另外事件的发射参考了:https://tangbc.github.io/vue-virtual-scroll-list/#/keep-state 2、编写 select-virtual-list 组件 这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 sele...
1、组件:el-select + vue虚拟滚动(vue-virtual-scroll-list) 2、安装:npm install vue-virtual-scroll-list --save 3、参考: NPM地址:https://www.npmjs.com/package/vue-virtual-scroll-list 官网地址:https://tangbc.github.io/vue-virtual-scroll-list/#/ 三:参考代码 1 2 3 4 5 6 7 8 9 10 ...
针对el-select组件,可以引入vue-virtual-scroll-list等虚拟滚动插件,对组件进行二次封装。 具体实现步骤如下: 安装vue-virtual-scroll-list插件。 创建一个全局的VirtualListSelect组件,该组件内部结合el-select和virtual-list,实现虚拟滚动功能。 在需要使用大数据量下拉框的地方,引入并使用VirtualListSelect组件。 通过这...
在 el-select 组件内部引入安装好的 vue-virtual-scroll-list,定义好组件的基础结构,和需要传入的 props 属性 <template><el-selectv-model="value"v-bind="$atts"v-on="$listeners"><virtual-scroll-listref="virtualListRef"></virtual-scroll-list></el-select></template><scriptsetup>importVirtualScrol...
在Vue2中给el-select添加虚拟滚动,可以有效解决大数据量时渲染卡顿的问题。以下是实现步骤,包括安装虚拟滚动库、配置和引入、在el-select中应用虚拟滚动等。 1. 安装虚拟滚动库 推荐使用vue-virtual-scroller这个库来实现虚拟滚动。你可以通过npm来安装它: bash npm install vue-virtual-scroller --save 2. 引入...
第二个注意点就是如何判断滚动到可视区域的底部了,这个需要自行了解scrollHeight,scrollTop,clientHeight概念。 第三个坑:一定要给el-select添加一个poper-class,因为select的下拉框是在body上的,如果不使用popper-class,滚动事件可能会被绑定到整个页面或父元素上,就不会精确的绑定要我们需要的区域。很多时候就是滚动...
feat:基于vue-virtual-scroll-list跟element-ui实现选择器虚拟列表 Sep 20, 2022 select-virtual-list 一个基于vue-virtual-scroll-list跟element-ui的下拉虚拟列表,解决下拉选择框数据量大时,卡顿问题。 Releases No releases published Packages No packages published...
import virtualScrollList from "el-select-virtual-scroll-list"; <VirtualList :bindSelectValue="newForm.brandId" @parentChange="(value) => (newForm.brandId = value)" :disabled="newForm.typeId == 25" label="请选择" placeholder="请选择" selectKey="brandId" :keeps="20" :selectWidth="100...
virtual-scroll 7 name : String Description Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists Examples car_id car_id virtual-scroll-horizontal : Boolean Description Make virtual list work in horizontal mo...
如果 Vue 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 string title 选中该 Option 后,Select 的 title string - value 默认根据此属性值进行筛选 string|number - OptGroup props # 参数说明类型默认值 key string - label 组名 string|function(h)|slot - FAQ # 点击dropdown...