提供el-select虚拟滚动的代码示例: vue <template> <el-select v-model="selectedValue" placeholder="请选择" filterable remote reserve-keyword :remote-method="remoteMethod" :popper-class="['virtual-scroll']" :loading="loading" > <el-option v-for="item in visibleOptions" :key...
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...
项目中需要用到el-select选择医院,全国医院数据量非常大,通过API读取数据页面直接卡死。 二、解决方案 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 官网地址:htt...
A free, fast, and reliable CDN for el-select-virtual-scroll-list. v2.0X基于element-ui封装增加虚拟列表下拉框,增加数据回显
2、编写 select-virtual-list 组件 这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 select-virtual-list。 新建文件 src\components\SelectVirtualList\index.vue ...
因为项目中数据量有时候过于庞大,使用elementui的select组件时,会导致下拉框加载数据蛮并且卡顿甚至于卡死,为解决这个问题,发现vue-virtual-scroll-list这个插件,地址 https://www.npmjs.com/package/vue-virtual-scroll-list ,用来模拟虚拟滚动,从而解决问题。
如果数据量大,可以考虑使用虚拟滚动(virtual-scroll)功能,只渲染可视区域内的选项,从而减轻DOM的压力和响应速度。 节流或防抖处理用户输入:当用户在输入框中快速输入时,可以使用Vue的debounce或throttle函数包装监听事件,减缓触发筛选的频率。 局部状态管理:可以考虑在el-select组件的范围内建立一个局部状态来暂存筛选条件...
你这种这么大的数据量,如果真的没办法减少一次性处理的数据量哪么要考虑,只加载渲染可显示的窗口内的数据, 比如,用这类el-table-virtual-scroll,的virtual scroll来解决 有用2 回复 查看全部 2 个回答 推荐问题 solidjs中如何实现vue中的keep-alive功能? 请在Solid.js中实现Vue.js的keep-alive功能。需要提供具...
<virtual-column> 组件内封装了 <el-table-column>,支持传入 <el-table-column> 组件的props属性。其中 <virtual-column> 会在表格row数据上扩展 $v_checked、$v_expanded ... 等属性,请悉知。更多demo & 源码查看:https://xiaocheng555.github.io/el-table-virtual-scroll/...
代码主要是实现一个el-select下拉加载的自定义指令v-loadmore: import Vue from 'vue' export default {}.install = (Vue, options = {}) => { Vue.directive('loadmore', { inserted(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTDOWN_DOM = el.querySelector( ...