vue配合element-ui，實現el-table表格無限滾動加載的功能（與自帶的 infinite-scroll 結合）

 

注意：請盡量設置 el-table 的高度，可以設置為 auto/100%（自適應高度），未設置會取 400px 的默認值（不然會導致一直加載）

安裝

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

全局引入

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

局部引入

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

完整實例

<template>
  <el-table 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>