el-table怎么实现触底加载更多？

三步曲：定义指令/绑定指令/执行方法

<el-dialog
    custom-class='addLimit_dialog'
    :modal='true'
    title="表格"
    :visible.sync="isShowMask"
    width="60%;height:65%;">
    <el-button type="primary" :disabled="!hasPreviousPage" class="mt_20" @click="addStaff(2)">+添加</el-button>
    
        <!--绑定指令   v-loadmore="handleScroll" 
        此处应注意设置table的高度设置 不要同时设置max-height跟height-->
        
            <el-table ref="dialogTable" v-loadmore="handleScroll"  v-if="diolagList.length>0"  class="mt_20 table_market diaLog_table"  :data="diolagList" :border="true"  :max-height="maxHeight">
                <el-table-column prop="userName" label="姓名"  show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{scope.row.userName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="maxNum" label="数量" width="150px" show-overflow-tooltip >
                    <template slot-scope="scope">
                        <span v-if="scope.row.isAddStaff==1">{{ scope.row.maxNum || '--'}}</span>
                        <el-form ref="form4" :model="scope.row" label-width="0" v-else >
                                <el-form-item prop="maxNum" :rules="[{ required: true, message: '请输入', trigger: 'change' }]">
                                    <el-input type="text" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"  v-model="scope.row.maxNum" placeholder="请输入" size="mini" maxlength="7"></el-input>
                            </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="diolagList.length === 0" class="emptyDiv">
            <p>暂无数据</p>
        </div>
    </el-dialog>

export default{
    //定义指令
    directives:{
        loadmore(el,binding){
           const selectWrap = el.querySelector('.el-table__body-wrapper');
           selectWrap.addEventListener('scroll', function (){
              if (this.scrollHeight - this.scrollTop <= this.clientHeight) {
                binding.value();//执行操作
              }
           })
        }
  },
  method:{
      data(){
          return{
          
              ...
          }
      },
      // 任务滚动加载--执行方法
    handleScroll () {
        //防抖处理 
        let now = new Date().getTime()
        if (now - this.lastEventTime > 1000) {
          this.lastEventTime = now
        } else {
          return false
        }
        
        if (this.diolagList.length === 0) return 
        if ((this.pageNum * this.pageSize > this.diolagList.length) && this.diolagList.length !== 0) {
          this.$message.warning('没有更多了')
          return false
        }
        
        if (this.canTaskPage) {
          this.pageSize++;
          
          this.getData(data参数)
          
          this.canTaskPage = false
          setTimeout(() => {
            this.canTaskPage = true
          }, 500)
        }
    },
    getData(){
          let data = ''
          let res = await getLimitItem(data)
          if (res?.data?.status === 0) {
            this.hasPreviousPage = res?.data?.data.hasPreviousPage
            let list = res?.data?.data.list
            
            if (this.pageSize === 1) {
              this.diolagList = list
            } else {
              this.diolagList = [...this.diolagList,...list]
            }
        }
  },
}