在el-table上使用无限滚动加载

一、安装插件

npm install --save el-table-infinite-scroll

二、全局引用

代码语言：javascript复制

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
Vue.use(elTableInfiniteScroll);

三、实例

代码语言：javascript复制

<template>
  <div>
    <el-table :data="tableData" v-el-table-infinite-scroll="load" height="300px">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <el-alert v-if="isflag" title="正在努力加载中..." type="success" center :closable="false" show-icon></el-alert>
    <el-alert v-if="isMore" title="没有更多啦！" type="warning" center show-icon></el-alert>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isflag: false,
      isMore: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  methods: {
    load() {
      this.isMore = false;
      this.isflag = true;
      if (this.isflag) {
        this.tableData = this.tableData.concat(this.tableData);
        setTimeout(()=>{
        this.isflag = false      
        console.log(this.isflag)      
        },1000)
        
      }
    }
  }
};
</script>

后来发现滚动到下面有时候会执行load2次，用下面的方法规避，间隔2秒才执行逻辑代码

代码语言：javascript复制

    load(){
      let nowTime=new Date().getTime()
      let diffTime = (nowTime-this.lastTime)/1000
     
      if(diffTime>2){
        if(this.tableData.arr.length<this.totalTableData.length){
          this.curPage  
          console.log(this.curPage)
          let addData = this.totalTableData.slice((this.curPage-1)*this.pageSize,this.curPage*this.pageSize)
        
          this.tableData.arr = this.tableData.arr.concat(addData)
        }
      }
       this.lastTime = nowTime
      
    },

滚动条滚动到顶部代码

代码语言：javascript复制

this.$nextTick(() => {
    this.$refs.table.bodyWrapper.scrollTop = 0
})

npm el scroll table 插件

0 人点赞