在Element UI中使用Select,子组件中的下拉框加载更多数据

在element Ui中使用Select组件时,如果后端返回的数据量过大,我们需要做上拉加载更多,前提是后端进行了分页处理

1.首选获取滚动条的高度
创建一个js文件,获取滚动条高度

// directives.js
 
import Vue from 'vue'
 
let selectLoadMore = Vue.directive('selectLoadMore', {
     
  bind (el, binding) {
     
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
     
      
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (CONDITION) {
     
        binding.value()
      }
    })
  }
})
export default selectLoadMore

2.在组件中使用
值得一提的是,我使用的是父子组件,即父组件请求数据,传给子组件然后子组件渲染结构如下

card.vue是父组件即请求数据的页面,allotDialog.vue为子组件,是一个弹框,用来渲染
首先在子组件中的下拉框

//allotDialog.vue

 <el-select  v-selectLoadMore="selectLoadMore"  @change="changeAll" v-model="form.set" multiple >

//引入
import {
     selectLoadMore} from '../../../../../utils/directives.js'

在子组件中加上我们自己定义的指令v-selectLoadMore="selectLoadMore"

//card.vue

<allotDialog @getEnableList='getEnableList' ref="allotDialog"></allotDialog>

在父组件中给子组件加一个方法getEnableList,即我们请求数组的方法

我们在父组件中请求数据

//card.vue
    async getEnableList() {
     
      let res = await getEnableFlowPackage({
     
        currentPage:this.page,
        pageSize:'10'
      })
      this.enableList = .res.data.data.dataList
    },

此时的this.page恒为1,因为我们还没有去子组件中传递参数

//allotDialog.vue
  selectLoadMore () {
     
    console.log(11111)
  },

我们去子组件的methods中调用我们自定义的方法,打印一下console.log(11111),看一下下拉框触底是否可调用,接着我们在子组件中调用父组件中的方法

//allotDialog.vue
  selectLoadMore () {
     
    this.$emit('getEnableList',++this.page)

  },

使用this.$emit()方法,并且向父组件传递页数,这里++this.page,是页面初始化为1,如果是this.page++的话,第一页的数据会重复
接着我们去父组件中接收参数

//card.vue
    async getEnableList(data) {
     
      //判断是否传参
      if (data === undefined) {
     
        this.page = 1
      } else {
     
        this.page= data
      }
      let res = await getEnableFlowPackage({
     
        currentPage:this.page,
        pageSize:'10'
      })
      if(res.data.success === true) {
     
      this.enableList = [...this.enableList,...res.data.data.dataList]
      this.$refs.allotDialog.enableList = this.enableList
     }
    },

这里的data就是我们传过来的数据,由于第一次打开并没有触底,所以data为undefined,所以需要判断一下,
我们把请求回来的数据合并,并且传给子组件,这样就完成了数据的加载更多了,还有一个小问题就是一直触底会一直请求,

//card.vue
    async getEnableList(data) {
     
      //判断是否传参
      if (data === undefined) {
     
        this.page = 1
      } else {
     
        this.page= data
      }
      let res = await getEnableFlowPackage({
     
        currentPage:this.page,
        pageSize:'10'
      })
      if(res.data.success === true) {
     
      this.enableList = [...this.enableList,...res.data.data.dataList]
      this.$refs.allotDialog.enableList = this.enableList
        if (res.data.data.dataList.length < 10 || this.enableList.length>= res.data.data.totalCount) {
     
       this.$refs.allotDialog.triggering = false
     }
    },

这里做一个判断,当数据小于10条或者集合的长度大于或者等于后端返回给我们的总数时,给子组件传递参数为false,

//allotDialog.vue
  selectLoadMore () {
     
    if (mthis.triggering == false) return
    this.$emit('getEnableList',++this.page)

  },

在子组件中判断参数是否为true,如果不为true则不请求数据mthis.triggering在data中需要设置为true,
这样就可以完成element-ui select 组件上拉加载更多数据了