前端（VUE）在el-table上实现懒加载

最新推荐文章于 2025-06-13 20:00:26 发布

程序猿OR攻城狮

最新推荐文章于 2025-06-13 20:00:26 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40230848/article/details/128563502

vue 专栏收录该内容

4 篇文章

订阅专栏

文章展示了如何在Vue项目中使用el-table-infinite-scroll插件实现表格的无限滚动加载功能。通过安装依赖、全局引用、在el-table标签中引入指令以及定义load函数来处理数据加载，同时在滚动到底部时显示加载状态提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装依赖

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

2、全局引用

import Vue from 'vue';  
import elTableInfiniteScroll from 'el-table-infinite-scroll';  `在这里插入代码片`
Vue.use(elTableInfiniteScroll);

3、使用方式

1.在el-table标签中引入v-el-table-infinite-scroll=“load”

 <el-table
   v-loading="loading"
   v-el-table-infinite-scroll="load"
   border
   :data="commodityList"
   height="350px"
   @selection-change="handleSelectionChange"
   @sort-change="sort"
 >

2.在el-table标签下面加入渲染状态el-alert

   <el-table-column label="商品名称" align="center" width="250">
     <template slot-scope="scope">
       <div class="fx">
         <el-image
           :src="scope.row.picture"
           :preview-src-list="[scope.row.picture]"
           style="flex: 40"
         >
           <div slot="placeholder" class="image-slot">
             加载中<span class="dot">...</span>
           </div>
         </el-image>
         <div class="imaged">{{ scope.row.Name }}</div>
       </div>
     </template>
 </el-table>
 <el-alert
   v-if="isflag"
   title="正在努力加载中..."
   type="success"
   center
   :closable="false"
   show-icon
 />
 <el-alert
   v-if="isMore"
   title="没有更多啦！"
   type="warning"
   center
   show-icon
 />

3.load函数

 async load() {
   this.isMore = false;
   this.isflag = true;
   if (this.queryParams.pageNum == this.total) {
     this.isMore = true;
   } else {
     await getStoreList(this.queryParams).then((res) => {
       let datalist = response.rows;
       this.total = response.total;
       this.commodityList = this.commodityList.concat(datalist);
     });
   }
 }

完整案例：

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