elementui中el-table实现下拉加载

<template>
  <div>
    <el-dialog title="标题" :visible.sync="dialogTableVisible" show-summary="true">
      <el-table :data="dataList" height="400" ref="table">
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="名称" />
        <el-table-column prop="address" label="地址" align="center" width="200" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getDataListApi } from '@/api/batch';

export default {
  name: 'NewAdAdminDataTemplate',

  data() {
    return {
      dialogTableVisible:true,
      dataParams:{
        pageIndex:1,
        pageSize:10,
      },
      dataList:[],
      dataTotal:0,
      isLoading:false,
    };
  },

  mounted() {
    this.handleScroll();
    this.getDataList();
  },

  methods: {
    getDataList(){
      this.isLoading=false;
      getDataListApi(this.dataParams).then(res => {
        this.isLoading=true;
        if(res.code == 200){
          if (this.dataParams.pageIndex != 1) {
            this.dataList.push(...res.data.list)
          } else {
            this.dataList = res.data.list;
          }
          this.dataTotal = Number(res.data.total);
        }
      })
    },
    handleScroll() {
      this.$nextTick(() => {
        this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
          const height = res.target
          const clientHeight = height.clientHeight
          const scrollTop = height.scrollTop
          const scrollHeight = height.scrollHeight

          if (clientHeight + scrollTop + 50 >= scrollHeight && this.isLoading) {
            if (this.dataTotal > this.dataList.length) {
              this.dataParams.pageIndex++
              this.getDataList();
            } else {
              this.dataList.push({ address: '加载完毕', name: '加载完毕' })
              this.isLoading = false;
            }
          };
        }, true);
      })
    },
  },
};
</script>

<style lang="scss" scoped></style>