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

这篇具有很好参考价值的文章主要介绍了vue elementui的select组件实现滑到底部分页请求后端接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.实现效果

老规矩，直接上最后的实现效果
vue elementui的select组件实现滑到底部分页请求后端接口,vue.js,elementui,前端

2.实现原理

直接上代码

   <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()
          }
        })
      }
    }
  },