在element-ui的select下拉框如何实现滚动加载

这篇文章给大家分享的是有关在element-ui的select下拉框如何实现滚动加载的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

这里通过自定义封装vue指令进行封装。

以下以element-ui中的select为例：

 在main.js同级别文件中添加directives.js:

// directives.js import Vue from 'vue' Vue.directive('loadmore', {  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()    }   })  } })

• v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听

• scrollHeight 获取元素内容高度(只读)

• scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

• clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

这里运用到了滚动偏移来做监听来处理，这与聊天对话框中默认下拉到底部的原理是大同小异的，后续我会有专门的文章进行讲解。

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

然后在组件中使用

<!-- vue --> <el-select  v-model="chatmode"  placeholder="聊天模式"  size="mini"  v-loadmore="loadMore">  <el-option   v-for="item in chatmodes"   :key="item.value"   :label="item.qa_name"   :value="item.qa_code"   :disabled="item.disabled">  </el-option> </el-select> <script> export default {  methods: {   loadMore () {    // 这里写入要触发的方法   }  } } </script>

感谢各位的阅读！关于“在element-ui的select下拉框如何实现滚动加载”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！