使用指令实现element表格的下拉刷新

在自己开发的项目中，数据一直都是分页处理，直到有一天产品想要基于element表格组件下拉刷新的效果。

目前实现的是全局指令
在plugins文件下新增directives.js文件夹

//   注册指令组件

export default (Vue)=>{
  Vue.directive('loadele', {
    bind(el, binding, vnode) {
      //.el-table__body-wrapper 是表格组件中body标签的class样式名，也就是下拉框的父级class
      const tableWrap = el.querySelector('.el-table__body-wrapper')
      tableWrap .addEventListener('scroll', function() {
        const sign = 20		// 定义小于多少px时执行刷新
        const scrollHeight = this.scrollHeight - this.scrollTop - this.clientHeight
        if (scrollHeight <= sign) {
     	// 指令要触发的事件
          vnode.context.getNewData()
        }
      })
    }
  })
}

在main.js中引入

import directives from './plugins/directives'
Vue.use(directives)

在页面中使用

<el-table :data="outData" height="calc(100vh - 200px)" class="lis_table" @row-click="getTableData" v-loadele="getNewData" highlight-current-row @cell-click="changeInput">
          <el-table-column prop="testdate" fixed label="测试日期" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.testdate | formatTime('yyyy-MM-dd')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="testItemName" fixed label="项目名称" align="center" min-width="100"></el-table-column>
        </el-table>