el-select 触底分页+远程搜索

🍿★,°:.☆(￣▽￣)/$:.°★ 🍿🍟欢迎来到前端初见的博文，本文主要讲解el-select 触底分页+远程搜索🍟👨‍🔧 个人主页 : 前端初见🥞喜欢的朋友可以关注一下，下次更新不迷路🥞 @TOC

前言

大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。
解决方案:

• 后端将接口改为分页的、前端将el-select下拉框中的数据改为滚动加载
• 后端将接口改为模糊搜索的形式，通过选择器中输入的内容去搜索模糊匹配的数据然后返回；前端使用 elementUI 中el-select的远程搜索
• 我们可以实现一个Vue的自定义指令，每当使用el-select滚动到列表底部的时候就请求下一页数据，来达到下拉滚动加载更多的目的。

一、el-select 触底分页+远程搜索

触底分页

远程搜索

1.封装触底自定义指令

src目录下创建 select.js，并在main.js中全局引入
代码主要是实现一个el-select下拉加载的自定义指令v-loadmore：

import Vue from'vue'exportdefault{}.install=(Vue, options ={})=>{
  Vue.directive('loadmore',{inserted(el, binding){// 获取element-ui定义好的scroll盒子constSELECTDOWN_DOM= el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTDOWN_DOM.addEventListener('scroll',function(){constCONDITION=this.scrollHeight -this.scrollTop <=this.clientHeight
        if(CONDITION){
          binding.value()}})},})}

代码说明：

• document.querySelector：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
• Element.scrollHeight：在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度（只读）
• Element.scrollTop：获取或设置一个元素的内容垂直滚动的像素数。
• Element.clientHeight：读取元素的可见高度（只读）。
• 元素滚动到底，下面等式返回true，没有则返回false。
• 警告： 在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。

2.在 mian.js 引入封装好的自定义指令

在项目中全局注册v-loadmore指令

import loadMore from'./plugins/select'
Vue.use(loadMore)

3.在组件中进行使用

最后在组件el-select中使用该指令

• html部分

<el-form-itemlabel="关联案件:"><el-selectv-model="searchParams.caseCode"v-loadmore="handleScroll"filterableremote:remote-method="remoteMethod"><el-optionv-for="item in ajList":key="item.caseCode":label="item.caseName":value="item.caseCode"></el-option></el-select></el-form-item>

• js部分

exportdefault{data(){return{slectloading:false,//搜索下拉菜单ajList:[],//案件数据total:0,//案件所有总数(接口返回)dqajtotal:0,//当前案件总数(每次存储的长度)}},created(){this.getajnewlist()//获取案件},methods:{handleScroll(){
      console.log('触底了')
      console.log(this.dqajtotal,this.ajtotal)if(this.ajList.length <this.ajtotal){this.slectloading =truethis.getajnewlist()//获取案件方法this.slectloading =false}},// 获取案件getajnewlist(){this.selectfy.page =this.selectfy.page +1
      console.log('页码',this.selectfy.page)this.$axios({url:'case/list',method:'GET',params:this.selectfy,}).then((res)=>{if(res.code ===2000&& res.data){
          console.log('获取成功')this.ajtotal = res.data.total
          if(res.data.records && res.data.records.length >0){
            res.data.records.forEach((ele)=>{var idx =this.ajList.findIndex((item)=>{return item.caseId == ele.caseId
              })if(idx ==-1){this.ajList.push(ele)}})}}else{
          console.log(res.resultStr)}
        console.log(res)})},// 关联案件下拉菜单远程搜索remoteMethod(val){
      console.log('远程搜索', val)if(val && val.length >0){// 有内容this.slectloading =truethis.$axios({url:'case/list',method:'GET',params:{size:10,caseName: val,},}).then((res)=>{
          console.log('远程搜索', res)this.ajList = res.data.records //案件信息this.slectloading =false})}else{this.slectloading =truethis.$axios({url:'case/list',method:'GET',params:{size:10,},}).then((res)=>{
          console.log(res)
          console.log('远程搜索', res)this.ajList = res.data.records //案件信息this.slectloading =false})}},},}

4.注意

• 传入的数组个数必须大于或者等于8个选项时才能让el-select组件出现下拉滚动。
• 列表里不存在滚动时，无法触发传入指令的函数。 未对 el-select 的其他参数做过多支持，如需支持，在不影响已有实例的使用的情况下，请直接修改组件源码增加可选的 prop 参数即可 当然，在项目中遇到某些固定的加载请求时，我们也可以对该组件进行再次封装，具体可以根据自身的业务需求进行修改。

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见