elementUi中select下拉框触底加载下一页

首先，这个问题需要我们写一个自定义指令来监听一下select下拉框的scroll事件，这个是第一步，

第一步：新建一个select.js文件。具体代码如下：

第二步：在main.js文件中引入即可。当然引入有两种引入方式，下面来介绍一下。

1、第一种引入方式 （这种方式是项目中还有其他的自定义指令，不行全部拿过来），这个引入方式就是上面我那种直接 export  default  直接暴露出去的写法即可

import directives from '@/assets/js/directives'

Object.keys(directives).forEach(item => {
  Vue.directive(item, directives[item])
})

2、第二种引入方式 。 是直接写个vue文件 ，引入vue, Vue.directive(  )在里面书写代码，这种方式的引入如下：

import Directives from './directives/index'

Vue.use(Directives)

 第三步：直接在需要使用的页面组件中使用即可。

 

getName函数即是请求下拉分页数据的方法，和平常的分页处理逻辑一样。

这样就完美的解决了下拉框select数据触底加载下一页数据的问题。

欢迎大家评论交流！