用户监听事件加载新数据,对el-select的功能没有影响。 这个思路也适用于其他的列表监听滚动触底加载更多数据。 实现代码 <!-- 监听 el-select 的滚动,并提供触底加载数据的回调 --><template><el-optionref="el"class="el-select-loading"value=""><templatev-if="hasMore"><el-iconclass="el-select-loadin...
自定义指令v-load-more编写 directives: {loadMore: {bind:function(el, binding) {constSELECTWRAP_DOM= el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");SELECTWRAP_DOM.addEventListener("scroll",function() {constCONDITION=this.scrollHeight-this.scrollTop<=this.clientHeight;if(CONDITI...
1、自定义指令(main.js) Vue.directive("loadmore",{bind(el,binding){// 获取element-ui定义好的scroll盒子letselect_dom=el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");select_dom.addEventListener("scroll",function(){constCONDITION=this.scrollHeight-this.scrollTop<=this.clientHeig...
1Vue.directive('loadmore', {2inserted:function(el, binding) {3const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); // 获取下拉框元素5dom.addEventListener('scroll',function() { // 监听元素触底6const condition =this.scrollHeight -this.scrollTop <=this.clientHeigh...
在Vue2中给el-select添加虚拟滚动,可以有效解决大数据量时渲染卡顿的问题。以下是实现步骤,包括安装虚拟滚动库、配置和引入、在el-select中应用虚拟滚动等。 1. 安装虚拟滚动库 推荐使用vue-virtual-scroller这个库来实现虚拟滚动。你可以通过npm来安装它: bash npm install vue-virtual-scroller --save 2. 引入和...
在日常开发过程中,我们使用 Vue+Element UI 开发项目,经常会使用el-select组件进行数据的单选/多选、回显等操作。一般情况下使用el-select组件可以满足绝大部分应用场景,不会遇到特殊问题,但是如果数据源足够多,要在一大批的数据中进行筛选,则会出现组件加载数据太慢、页面卡顿等问题。
VUE+ElementUI中为el-select添加滚动加载事件 VUE+ElementUI中为el-select添加滚动加载事件 当⼀个下拉框的数据有很多时，如果我们直接把所有的数据渲染出来，肯定是不现实的，不仅加载慢还影响性能，所以需要对下拉框做滚动加载的处理 知识拓展 Vue.directive(id, [definition])，注册或获取全局指令，不做过多解释 ...
可以直接使用el.querySelector(xxx)去选中下拉框的选项弹出层了。就不用使用document.querySelector(xxx...
$refs.mySelect.blur() } } } } </script> <style></style> 解决方案2. Vue监听Scroll事件 已使用该方案解决问题 <template> <div> <el-button type="primary" @click="dialogVisible = true">Click</el-button> <el-dialog title="滚动表单" :visible.sync="dialogVisible" width="50%"> <div...
VUE+ElementUI中为el-select添加滚动加载事件 当一个下拉框的数据有很多时,如果我们直接把所有的数据渲染出来,肯定是不现实的,不仅加载慢还影响性能,所以需要对下拉框做滚动加载的处理 知识拓展 Vue.directive(id, [definition]),注册或获取全局指令,不做过多解释 ...