以下是使用el-select虚拟列表组件的基本指南和示例代码: 示例代码: vue <template> <el-select v-model="selectedValue" placeholder="请选择"> <virtual-list :size="50" <!-- 每行的高度 --> :remain="10" <!-- 上下可见区域多渲染的行数 --> :item-key="'id'...
2、编写 select-virtual-list 组件 这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 select-virtual-list。 新建文件 src\components\SelectVirtualList\index.vue <template>...
import virtualList from 'vue-virtual-scroll-list' // 注册组件 components: { 'virtual-list': virtualList } 1. 2. 3. 4. 5. 基础用法 一、要用这个插件去包裹需要循坏展示的标签。这里就是el-option标签 <el-select v-model="mediaAccount" popper-class="virtualSelect"> <virtual-list style="max...
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组件,可以引入vue-virtual-scroll-list等虚拟滚动插件,对组件进行二次封装。 具体实现步骤如下: 安装vue-virtual-scroll-list插件。 创建一个全局的VirtualListSelect组件,该组件内部结合el-select和virtual-list,实现虚拟滚动功能。 在需要使用大数据量下拉框的地方,引入并使用VirtualListSelect组件。 通过...
A free, fast, and reliable CDN for el-select-virtual-scroll-list. v2.0X基于element-ui封装增加虚拟列表下拉框,增加数据回显
解决element-ui el-select数据过大方案 一、背景 项目中需要用到el-select选择医院,全国医院数据量非常大,通过API读取数据页面直接卡死。 二、解决方案 1、组件:el-select + vue虚拟滚动(vue-virtual-scroll-list) 2、安装:npm install vue-virtual-scroll-list --save...
console.log(selection, rest, 'onSelectAll') } } }8 changes: 8 additions & 0 deletions 8 demo/src/views/VSelectionDemo.vue Original file line numberDiff line numberDiff line change @@ -7,6 +7,8 @@ :item-size="62" key-prop="id" @change="(virtualList) => tableData = v...
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: ...
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: ...