element-ui 的 el-table 上使用无限滚动加载

安装

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

引入

全局

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

Vue.use(elTableInfiniteScroll);

局部

import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}

使用

<template>
  <el-table
    border
    height="400px"
    v-el-table-infinite-scroll="load"
    element-loading-text="数据获取中"
    element-loading-spinner="el-icon-loading"
    :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>

load() {
    this.pageNum = ++this.pageNum;
    this.init();
}
async init() {
    const params = {
        pageNum: this.pageNum,
        pageSize: 20,
    };
    const res = await axios.getlist(params).catch((e) => {
        console.log(e);
    });
    if (!res.data.code) {
        this.tableData = this.tableData.concat(res.data.list);
    }
}