根据搜索条件去分页加载选项列表,可以写如下的指令
directives: { loadmore: { bind(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector( ".el-select-dropdown .el-select-dropdown__wrap" ); SELECTWRAP_DOM.addEventListener("scroll", function() { const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight; if (CONDITION) { binding.value(); } }); } } }, 使用的时候 <el-select v-loadmore="loadData" > <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> async loadData() { this.page++; await this.getList; },
但是要注意的问题是第一次加载的数据不要过多,不然element ui的这样式就出不来滚动条了,
还要自己去修改样式,我的这个实验的是每次一页10条去加载的,方案可行还要自己去修改样式,
我的这个实验的是每次一页10条去加载的,方案可行