当前位置：首页 > news >正文

vue3.0 + element plus 全局自定义指令：select滚动分页

news 2025/8/3 22:13:33

需求：项目里面下拉框数据较多，一次性请求数据，体验差，效果就是滚动进行分页。

看到这个需求的时候，我第一反应就是封装成自定义指令，这样回头用的时候，直接调用就可以了。

第一步请添加图片描述
第二步：
在main.js页面全局引入：

import directive from './directive' 
directive(app)

第三步：selectloadmore.js文件的代码

// 自定义指令export default {mounted(el, binding) {console.log(binding.value);const SELECTWRAP_DOM = document.querySelector(`${binding.value.className} .el-select-dropdown .el-select-dropdown__wrap`);if (SELECTWRAP_DOM) {SELECTWRAP_DOM.addEventListener('scroll', function () {const condition = this.scrollTop + this.clientHeight >= this.scrollHeight - 1;// 当滚动条滚动到最底下的时候执行接口加载下一页if (condition) {binding.value.loadMore && binding.value.loadMore();}});}},
};

第四步：页面使用

 <el-select v-model="queryParams.responsePerson" popper-class="myOption"  placeholder="请选择" v-selectloadmore="{className:'.myOption',loadMore:loadMore}"><el-optionv-for="item in responseOptions":key="item.value":label="item.label":value="item.value"clearable/></el-select>

v-selectloadmore="{className:'.myOption',loadMore:loadMore}"，这个地方加入className是为了页面上如果有多个这种下拉框，进行区分

第五步：loadMore方法，这个根据实际功能进行逻辑调整

//自定义指令
let page = ref(1);
let totalCount = ref(0);
function loadMore() {if (page.value <= parseInt(totalCount.value / 10)) {page.value += 1;//获得接口数据loadOptions(page.value);}
}
function loadOptions(page) {proxyList({ status: 1, page_size: 10, page: page}).then((res) => {let arr = res.data.map((item)=>{return {label:item.name,value:item.id,}});responseOptions.value = responseOptions.value.concat(arr);totalCount.value = res.total;});
}

在使用的下拉框的地方，需要调用这个

page.value = 1;//这个千万不要忘了啊，因为这个忘了，我找了一晚上加一上午（需求是在弹窗里面，然后每次关闭弹窗，我重新打开下拉框的时候，就只会加载一次，哭死，找了那么久，都快绝望了）
responseOptions.value = [];//也要初始化一下，不然会重复添加
loadOptions(1);//其实相当于初始化