element-ui select下拉框滚动加载更多-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui select下拉框滚动加载更多。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当下拉框数据过多时,加载会非常慢,所以使用分页去显示,通过监听滚动事件来达到分页效果。

element-ui select下拉框滚动加载更多,vue.js,javascript,Powered by 金山文档

我是使用Vue自定义指令来做的。

一、首先在src下创建一个js文件，完成自定义指令的编写


import Vue from 'vue'

export default () => {
  Vue.directive('selectScroll', {
    bind (el, binding) {
//  如上图，我通过v-if来控制了两个select框，当没有binding.arg这个参数时，我只能监听到企业类型下的select框，所以，我通过传参控制了监听的哪个select框
      var className='.'+binding.arg
      el.className=binding.arg
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
      // const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)
      SCROLL_DOM.addEventListener('scroll', function () {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
        // 如果已达到指定位置则触发
        if (CONDITION) {
            // 将滚动行为告诉组件
            binding.value()
          }
        
      })
    }
  })
}

有没有大神告诉我，自定义指令为啥在同一个页面不能使用多次？

二、在main.js中引入进来


import Directives from './utils/select-scroll'
Vue.use(Directives)

三、使用


<el-select
  v-model="Id"
  v-selectScroll:selectName="handleScroll"   //这行最重要(传参)
  // v-selectScroll="handleScroll"   //这行最重要(不传参)
  filterable
  clearable
  placeholder="请选择"
>
  <el-option
    v-for="(item,index) in options"
    :key='index'
    :label="item.name"
    :value="item.id"
  ></el-option>
</el-select>

因为我还加了搜索功能,问题还算挺多的

参考官方文档:

自定义指令 | Vue.js文章来源地址https://www.toymoban.com/news/detail-602918.html

到了这里，关于element-ui select下拉框滚动加载更多的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！