1.配置js文件(底部触发命令)
export const 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(); } }); }, };
2.在main.js中引入分页加载
import { loadMore } from "@/directives"; Vue.directive("loadmore", loadMore);
3.在文件中使用
<el-form-item label="选择频率"> <el-select clearable v-model="formInline.channelId" size="mini" placeholder="选择频率" style=" 126px" @change="selectChannel" v-loadmore="loadmore" > <el-option v-for="(item, index) in departmentList" :key="index" :label="item.channelName" :value="item.channelId" ></el-option> </el-select> </el-form-item> //滑动触底的相关操作 loadmore(){ // console.log('我滑动加载了'); //数据页面更新,数据请求操作 },