el-select 结合 vue-virtual-scroll-list 可以显著提升大数据量下拉框的性能。 在Vue 项目中,当 el-select 组件需要处理大量数据时,直接使用会导致性能问题,如下拉框加载速度慢、卡顿甚至卡死。为了解决这个问题,可以使用 vue-virtual-scroll-list 插件来实现虚拟滚动。 1. 安装 vue-virtual-scroll-list 首先,你需...
npm install vue-virtual-scroll-list --save 1. 代码: VirtualSelect.vue <template> <div> <el-select popper-class="virtualselect" class="virtual-select-custom-style" :value="defaultValue" filterable :filter-method="filterMethod" default-first-option clearable :placeholder="placeholder" :disabled="d...
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 ...
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...
2、编写 select-virtual-list 组件 这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 select-virtual-list。 新建文件 src\components\SelectVirtualList\index.vue <template>...
vue插件 vue-virtual-scroll-list解决数据量太大问题 yuwenjing 2024-04-11 18:26阅读:8869评论:0推荐:1 vue-element-ui下拉多选验证问题 yuwenjing 2020-07-15 10:53阅读:4281评论:0推荐:0 公告 昵称:yuwenjing 园龄:8年9个月 粉丝:124 关注:10 ...
针对el-select组件,可以引入vue-virtual-scroll-list等虚拟滚动插件,对组件进行二次封装。 具体实现步骤如下: 安装vue-virtual-scroll-list插件。 创建一个全局的VirtualListSelect组件,该组件内部结合el-select和virtual-list,实现虚拟滚动功能。 在需要使用大数据量下拉框的地方,引入并使用VirtualListSelect组件。 通过...
基于element-ui和vue-virtual-scroll-list实现的虚拟列表选择器,支持el-select的大部分功能 vue2 element-ui el-select2 虚拟列表选择器 虚拟列表 tcpicl •0.1.0•2 years ago•0dependents•MITpublished version0.1.0,2 years ago0dependentslicensed under $MIT ...
var __vue_module_identifier__$2 = undefined; /* functional template */ @@ -2290,7 +2303,7 @@ if (row.$v_checked) hasUnselectableChecked = true; } }); this.virtualScroll.checkAll(val, selectableList); this.virtualScroll.checkAll(val, selectableList, true); this.isCheckedAll ...
2.1 Supportvirtual list. 2.0 Comprehensively improve the utilization rate of original parts. Usage Install npm install --save el-select-tree Require element-ui If your project does not use element-ui, you need to introduce a separate element-ui package, like this: ...