一、背景 项目中需要用到el-select选择医院,全国医院数据量非常大,通过API读取数据页面直接卡死。 二、解决方案 1、组件:el-select + vue虚拟滚动(vue-virtual-scroll-list) 2、安装:npm install vue-virtual-scroll-lis
2、编写 select-virtual-list 组件 这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 select-virtual-list。 新建文件 src\components\SelectVirtualList\index.vue <template>...
在Vue中实现带有虚拟滚动的select组件,可以通过结合虚拟滚动技术和自定义select组件来实现。虚拟滚动技术可以显著提升在长列表渲染时的性能,而自定义select组件则提供了更多的灵活性和自定义选项。 实现步骤 安装虚拟滚动插件 首先,需要选择一个虚拟滚动插件。例如,可以使用vue-virtual-scroller或vue-virtual-scroll-list等...
在 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...
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...
第二个注意点就是如何判断滚动到可视区域的底部了,这个需要自行了解scrollHeight,scrollTop,clientHeight概念。 第三个坑:一定要给el-select添加一个poper-class,因为select的下拉框是在body上的,如果不使用popper-class,滚动事件可能会被绑定到整个页面或父元素上,就不会精确的绑定要我们需要的区域。很多时候就是滚动...
一个基于vue-virtual-scroll-list跟element-ui的下拉虚拟列表,解决下拉选择框数据量大时,卡顿问题。 - kaimo313/select-virtual-list
针对el-select组件,可以引入vue-virtual-scroll-list等虚拟滚动插件,对组件进行二次封装。 具体实现步骤如下: 安装vue-virtual-scroll-list插件。 创建一个全局的VirtualListSelect组件,该组件内部结合el-select和virtual-list,实现虚拟滚动功能。 在需要使用大数据量下拉框的地方,引入并使用VirtualListSelect组件。 通过...
如果 Vue 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 string title 选中该 Option 后,Select 的 title string - value 默认根据此属性值进行筛选 string|number - OptGroup props # 参数说明类型默认值 key string - label 组名 string|function(h)|slot - FAQ # 点击dropdown...
5.vue插件 vue-virtual-scroll-list解决数据量太大问题 6.moment 获取本年/本季度/本月/本周/今天/上年/上季度/上月/上周/昨天 开始结束时间 7.三种方式实现主题切换方案 8.如何从base64中获取图像的宽度、高度、Uint8ClampedArray 9.setTimeout 和 setInterval 的定时时间深入研究 ...