vue 表格懒加载

vue 表格懒加载

elementui表格数据量大的时候页面会出现卡顿，可以分次获取后台数据，不然页面直接卡死。表格懒加载需要后台返回一个总的页数，前端监听滚动到底部的时候去调接口来获取数据，每调一次接口将总数+1,。也可以直接用其他的ui组件来处理。

 <el-table
      :key="tableKey"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :height="tableHeight"
      ref="editTable"
    >
      <el-table-column
        align="center"
        prop="index"
        label="序号"
        type="index"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="name"
      ></el-table-column>
      <el-table-column
        prop="email"
        label="email"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="address"
        align="center"
      ></el-table-column>
    </el-table>

data() {
    return {   
      tableData: [],
      currentPage: 1,//当前加载的page
      pageSize: 20,//当前的limit
      totalPage: 8,//后台返回的总页数
    };
  },
 mounted() {  
    this.loadData();
    this.handleScroll()
  },
 methods: {
  //监听dom的scroll事件
    handleScroll() {
      let that = this;
      let dom = that.$refs.editTable.bodyWrapper;
      dom.addEventListener('scroll', function () {
        const scrollDistance = 
        dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        if (scrollDistance <= 0) {         
          //等于0证明已经到底，可以请求接口
          if (that.currentPage < that.totalPage) {
            //当前页数小于总页数就请求
            that.currentPage++; //当前页数自增
            //请求接口的代码
            that.loadData();
          }
        }
      });
    },
    loadData() {
      //请求后台接口获取数据
      this.tableData = 后台接口返回的数据；
      this.tableData.map((v,i)=> {
        v.index = i+1;
      })      
    },
   

也可以在div上添加滚动事件

 <div class="artical" v-loading="isloading" ref="scrollbox">
     <el-scrollbar>
         <div
            v-for="(item, index) in tableData"
            :key="index"
            class="artical-main"
          >
              <div class="title">{{ item.jourHeadline }}</div>
              <div class="cerateTime">
                    创建人:{{
                      item.createUserName
                    }}&nbsp;&nbsp;&nbsp;发布时间:{{ item.jourTime }}
                  </div>
                  <div class="mainArt">{{ item.jourCentent }}</div>
                </div>
                <el-empty
                  :image-size="200"
                  v-if="tableData.length == 0"
                ></el-empty>
              </el-scrollbar>
            </div>

监听事件
  mounted() {
    document.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.listenerFunction);
  },

 //监听滚动事件
    handleScroll() {
      if (this.dialogFormVisible) {
        if (this.$refs.scrollbox.scrollTop == 0) {
          if (this.total > this.tableData.length) {
            this.listQuery.pageSize = this.listQuery.pageSize + 10;
            this.getData();
          }
        }
      }
    },

因为这个是写在弹框里面的，没加if (this.dialogFormVisible)会报错，加了之后就没有再报错了。