elementUI中el-select数据分页懒加载实现

前言

工作中使用elementUI框架时, 会经常用到下拉框展示数据,如果数据量很大会影响页面的渲染加载速度。遇到这种情况，通常后端代码会将数据做成分页查询，前端下拉框组件也要支持滑动到底部会自动加载下一页数据。话不多说,直接上代码。

正文代码

第一步，创建select-load-more.js文件

// 定义全局自定义指令
import Vue from 'vue'

const selectLazyLoad = function(Vue) {
  // el-select组件数据过多，使用翻页加载数据指令
  Vue.directive('selectLazyLoad', {
    bind(el, binding) {
      const SELECT_WRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      SELECT_WRAP_DOM.addEventListener('scroll', function() {
        // toFixed：把this.scrollTop转换为整数，兼容不同版本浏览器
        const condition = this.scrollHeight - this.scrollTop.toFixed(0) <= this.clientHeight
        if (condition) binding.value()
      })
    }
  })
}

if (window.Vue) {
  Vue.use(selectLazyLoad)
}

export default selectLazyLoad

第二步, 在main.js中注册引入自定义指令

import selectLazyLoad from './directive/select-load-more'    //引入
Vue.use(selectLazyLoad)    // 使用自定义指令

第三步, 创建公共组件并在组件中使用自定义指令v-selectLazyLoad

第四步, 在父组件中引入第三步创建的子组件

// 使用第三步创建的子组件


// 引入子组件
import BranchTreeSelect from '@/components/BranchTreeSelect'

components: {
    BranchTreeSelect
}

mothods: {
    setAccBranchNumber(val) {
      // val就是子组件选中的值
    }
}

后言

这样子组件下拉框就实现了检索、分页懒加载功能，目前只是简单的实现了功能,  可能某一天会心血来潮优化下代码...

如有问题请在下方留言，我会认真的查看每一条并尽量的给予回复。谢谢观看^^