vue—在el-table上实现懒加载效果

一、安装插件

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

---

二、全局引用

代码如下（示例）：

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

---

三、实例使用

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>