使用懒加载加载element-ui中的表格（原生分页）

需求：在element-ui表格中，使用滚动条滚动到最底部再去做网络请求。
代码：
HTML代码块

            <el-table :data="tableData_work" style="width: 100%" stripe ref="myTable"  height="550">
              <el-table-column prop="title" label="标题" width="290" align="left" :show-overflow-tooltip='true'
                header-align="center">
              </el-table-column>
              <el-table-column prop="updateName" label="上报人" width="285" align="center">
              </el-table-column>
              <el-table-column label="详情" width="290" align="center">
                <div>详情</div>
                <template slot-scope="scope">
                  <span @click="showF(scope.row)" class="specialColor">详情</span>
                </template>

              </el-table-column>
            </el-table>

JS代码

      tableListener() {
        let that = this;
        let dom = that.$refs.myTable.bodyWrapper
        dom.addEventListener("scroll", function() {
          const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
           console.log(scrollDistance)
          if (scrollDistance <= 0) { //等于0证明已经到底，可以请求接口
          // console.log(that.totalPage_work)
            if (that.page_work <= that.testNum_work) { //当前页数小于总页数就请求
              that.page_work++; //当前页数自增
              // that.rows_work=that.totalNum_work;
              //请求接口的代码
              that.getCmCenterNoticeList()
            }
          }
        })
      },

以及在mounted中的代码

    mounted() {
      this.tableListener()
    },