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

1.实现效果

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

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()
          }
        })
      }
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

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