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

news2024/11/15 18:48:07

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

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

第一步请添加图片描述
第二步：
在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-option
              v-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);//其实相当于初始化