网站开发公司交易流程,阳江房地产信息网官方网站,移动端cpu天梯图,博山网站建设需求#xff1a;项目里面下拉框数据较多 #xff0c;一次性请求数据#xff0c;体验差#xff0c;效果就是滚动进行分页。
看到这个需求的时候#xff0c;我第一反应就是封装成自定义指令#xff0c;这样回头用的时候#xff0c;直接调用就可以了。
第一步 第二步项目里面下拉框数据较多 一次性请求数据体验差效果就是滚动进行分页。
看到这个需求的时候我第一反应就是封装成自定义指令这样回头用的时候直接调用就可以了。
第一步 第二步 在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-modelqueryParams.responsePerson popper-classmyOption placeholder请选择 v-selectloadmore{className:.myOption,loadMore:loadMore}el-optionv-foritem in responseOptions:keyitem.value:labelitem.label:valueitem.valueclearable//el-selectv-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);//其实相当于初始化好了结束方便后面自己查阅
