el-select下拉加载基本概念el-select 是Element UI 库中的一个下拉选择框组件,它提供了丰富的配置项以满足不同的需求。下拉加载(也称为懒加载或分页加载)是el-select的一个高级用法,主要用于处理大数据量的选项加载,通过用户滚动或点击“加载更多”来分批加载选项,从而提高性能和用户体验。
ref="saveParameter" :model="saveParameter" inline inline-message style="margin:10px" > <el-form-item label="供应商" prop="lngcustomerid"> <el-select v-model="saveParameter.lngcustomerid" v-loadmore="loadMore()" style="width: 180px;" clearable :filter-method="filterMethod" filterable @v...
可以直接使用el.querySelector(xxx)去选中下拉框的选项弹出层了。就不用使用document.querySelector(xxx)...
自定义指令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...
// 懒加载loadmoreData(){if(this.loadmore){this.page.current=this.page.current+1;this.getShopList();}}, // //店铺选择changeShopInfo(e){this.shopId=e;}, remoteMethod(query){this.keyWord=queryif(query!=""){this.loading=true;getShopList({current:1,size:12,name:query}).then((res)=>...
您可以使用element-ui的el-select组件的loadMore方法来实现下拉加载数据。当您点击下一页时，loadMore方法会被调用，然后您可以在回调函数中判断是否是最后一页。如果是最后一页，则不执行加载操作。 如果您想要实现无限滚动，可以使用element-ui的el-select组件的loadMore方法，并在回调函数中判断是否是最后一...
el-select下拉加载（实现懒加载）情况：项⽬出现了下拉数据量过⼤，出现页⾯卡死问题，反馈到我这；当时实现思路1.使⽤render函数去渲染下拉框 试了发现卡死情况依然存在，所以尝试⽅法2 2.使⽤原⽣js去添加下拉框的<option> 页⾯卡死情况没了，但是变成原⽣select，数据量⼤很难找到对应的⼈...
manager, disabled: false, })); }); }, //下拉加载更多 selectLoadMore() { this.formData.pageNum++; this.getTitlePage(); //调用接口 }, 一共有18条数据,每次展示10条数据,那就是公2页,为啥会出现第3页这个时候出现的第三页就导致下拉框数据就全没了,求大佬指点一下这是前端问题还是后端问题...
获取数据方法: {代码...} 下拉加载方法 {代码...} 本来是18条数据,分2页,下拉加载的话应该是2页就对了,但是现在为啥出现了第3页,就导致整个下拉数据为空的
某些情况下,下拉框需要做触底加载,发请求,获取option的数据 为了方便复用,笔者封装了一个自定义指令 另外也提供了一个简单的接口,用于演示 我们先看看效果图 效果图 思路分析 注意事项一 el-select要不嵌入到body中 为何,不嵌入到body标签中呢? 答曰,更加方便自定义指令管理,如下属性: ...