vue 使用element UI 表格、下拉翻页 滚动底部加载更多注册全局指令

新建文件：directives.js

在main.js中引入：

import directives from './directives'

Vue.use(directives)

编辑 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()
            }
        })
    }
})

// 注册 表格滚动底部指令

Vue.directive('moretable', {
    bind(el, binding) {
        // 获取element-ui定义好的scroll盒子 表格滚动底部事件
        const TABLE_DOM = el.querySelector('.table-style .el-table__body-wrapper')
        TABLE_DOM.addEventListener('scroll', function () {

            const CONDITIONVALUE = this.scrollHeight - this.scrollTop <= this.clientHeight
            if (CONDITIONVALUE) {
                binding.value()
            }
        })
    }
})

使用：

 <el-table v-moretable="moretable"  > </el-table>


 moretable() {
      if (this.listTotal > this.tableData1.length) {
        this.page++
      // 请求下一页数据

      }
    },

下拉框使用方式一样

最后

以上就是激昂洋葱为你收集整理的vue 使用element UI 表格、下拉翻页 滚动底部加载更多注册全局指令的全部内容，希望文章能够帮你解决vue 使用element UI 表格、下拉翻页 滚动底部加载更多注册全局指令所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。