在element-ui的select下拉框加上滚动加载

最新推荐文章于 2024-10-02 09:27:15 发布

无月大大

最新推荐文章于 2024-10-02 09:27:15 发布

阅读量1.9k

点赞数 2

分类专栏： utils 文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/weixin_52103939/article/details/122210187

版权

utils 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

在项目中，我们需要运用到很多来自后端返回的数据。有时是上百条，有时甚至上千条。如果加上后端的多表查询或者数据量过大，这就导致在前端的显示就会及其慢，特别是在网络不好的时候更是如此。
所有针对element-ui的select下拉框加上滚动加载。

这里通过自定义封装vue指令进行封装。
以下以element-ui中的select为例：
一、在src/utils文件夹下新建directives.js:

import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    inserted(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      SELECTDOWN_DOM.addEventListener('scroll', function() {
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          binding.value()
        }
      })
    }
  })
}

v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
scrollHeight 获取元素内容高度(只读)
scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
clientHeight 读取元素的可见高度(只读)
如果元素滚动到底, 下面等式返回true, 没有则返回false
scrollHeight - scrollTop === clientHeight

二、在main.js里注册

// 注册滚动条加载触发事件v-loadmore绑定
import directives from './utils/loadMore'
Vue.use(directives)

三、使用

 <el-select v-model="ruleForm.TypeId" placeholder="请选择" v-loadmore="loadMore" popper-class="classification">
  <el-option v-for="item in optionsArr" :key="item.value" :label="item.typeName" :value="item.value" ></el-option>
</el-select>

data(){
	returen {
	 page:1,
	 pageSize:10,
	}
}

methods: {
    loadMore(){  // 这里写入要触发的方法
      this.pageSize += 10;  
      this.getClassification();  //查询的函数
    },
}