vue elementui的select组件实现滑到底部分页请求后端接口

vue elementui的select组件实现滑到底部分页请求后端接口

1.实现效果

老规矩,直接上最后的实现效果

2.实现原理

直接上代码

javascript 复制代码
   <el-form-item class="diagmosisItem" label="诊断" v-scroll="handleScroll">
            <el-select
            size="small"
              remote
              filterable
              clearable
              :loading="getAllDiagnosisLoading"
              v-model="queryObj.diagnosisDesc"
              :remote-method="handleRemoteDisease"
              @clear="handleClearDisease"
              >
              <el-option
                v-for="item in allDiagnosisList"
                :key="item.valueId"
                :label="item.valueNo +' '+ item.valueDesc"
                :value="item.valueDesc">
              </el-option>

            </el-select>
          </el-form-item>
//js
//mothods
    handleScroll() {
      if(!this.scrollStop) {
        this.diagnosisQuery.pageNo++
        this.getAllDiagnosis(this.diagnosisQueryText, 'join')
      }
    },
    // 远程搜索诊断
    async handleRemoteDisease(keyword = '') {
      this.diagnosisQueryText = keyword
      this.getAllDiagnosis(keyword)
    },
    // 清除选中诊断
    handleClearDisease() {
      this.getAllDiagnosis('', 'clear')
    },
     //诊断列表
    async getAllDiagnosis(val = '', type = 'search') {
      try {
        this.getAllDiagnosisLoading = true
        this.scrollStop = false
        let res = null
        if(this.isHaveDiagnoseFlag) {
          if(type =='search') {
            this.diagnosisQuery ={
              pageNo:0,
              pageSize:100
            }
            res = await this.reqGetAllDiagnosis({
              keyword:val,
              pageNo:0,
              pageSize:100
            })
          }
          else if(type == 'join') {
            res = await this.reqGetAllDiagnosis({
              keyword:val,
              ...this.diagnosisQuery
            })
          }
          else{
            this.allDiagnosisList = this.allDiagnosisList
            this.getAllDiagnosisLoading = false
          }

        }
        if (res && res.success) {
          if(type =='search') {
            this.allDiagnosisList = res.data
          }
          else{
            if(res.data.length == 0) {
              this.scrollStop = true
            }
            this.allDiagnosisList = [...res.data, ...this.allDiagnosisList]
          }
          this.getAllDiagnosisLoading = false
        }
      } catch (error) {
        this.getAllDiagnosisLoading = false
      }
    },
//主要看这里
  directives:{
    scroll:{
      bind(el, binding) {
        const SELECTNRAP_DON = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTNRAP_DON.addEventListener( 'scroll', function() {
          console.log(this.scrollHeight - this.scrollTop, this.clientHeight)
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
          if(CONDITION) {
            binding.value()
          }
        })
      }
    }
  },

scrollStop主要是用来诊断select移到底部不再请求数据,默认为false。思路反正就是到底了触发函数处理,pageNo++请求后端接口

相关推荐
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app