前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在el-table上使用无限滚动加载

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

作者头像
tianyawhl
发布2022-01-20 16:57:38
3.6K0
发布2022-01-20 16:57:38
举报
文章被收录于专栏:前端之攻略前端之攻略

一、安装插件

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

二、全局引用

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

三、实例

<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秒才执行逻辑代码

    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
      
    },

滚动条滚动到顶部代码

this.$nextTick(() => {
    this.$refs.table.bodyWrapper.scrollTop = 0
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021/04/21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档