vue 中滚动加载el-table

安装

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

全局引入

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

局部引入

<template>
  <el-table
    border
    height="400px"
    v-el-table-infinite-scroll="load"
    :data="tableData"
  >
    <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>
</template>

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';

const exampleData = new Array(10).fill({
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
});

export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data() {
    return {
      tableData: exampleData
    };
  },
  methods: {
    load() {
      this.$message.success('加载下一页');
      this.tableData = this.tableData.concat(exampleData);
    }
  }
};
</script>

<style scoped>
.el-table {
  width: 100%;
}
</style>

项目中使用： 

 load() {
        this.$message.success('加载下一页');
        this.examplenum++;
        this.getdetailsdata(this.optId, this.optSegId);
      },
调用分页接口
 getdetailsdata(optId, optSegid) {
        this.$message.success('加载下一页');
        // 获取详情数据分页数据
        this.$api.get('wp/opticalCale/getCableSysName', { pageSize: 20, pageNum: this.examplenum, optId, optSegid }).then(res => {
          console.log('res==================>', res);
          if (res.code === 0) {
            if (this.examplenum === 1) {
              this.systemdata = res.data.list || [];
            } else {
              this.exampleData = res.data.list || [];
              this.systemdata = this.systemdata.concat(this.exampleData);
            }
            console.log(this.systemdata);
            // this.titleData.forEach(val => {
            //   this.getSpanNum(val.name);
            // });
          }
        });
      },