element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）—

element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）——vue2.0

在线示例：https://yujinpan.github.io/el-table-infinite-scroll/
实现原理：https://github.com/yujinpan/el-table-infinite-scroll/blob/master/src/directives/table-infinite-scroll.js

此指令依赖于 element-ui，使用前请熟悉：

element-ui 表格
element-ui 无限滚动指令

使用

安装

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

全局引入

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

局部引入

1 <script>
2 import elTableInfiniteScroll from 'el-table-infinite-scroll';
3 export default {
4   directives: {
5     'el-table-infinite-scroll': elTableInfiniteScroll
6   }
7 }
8 </script>

完整实例

 1 <template>
 2   <el-table
 3     border
 4     height="400px"
 5     v-el-table-infinite-scroll="load"
 6     :data="tableData"
 7   >
 8     <el-table-column prop="date" label="日期" width="180"> </el-table-column>
 9     <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
10     <el-table-column prop="address" label="地址"> </el-table-column>
11   </el-table>
12 </template>
13 
14 <script>
15 import elTableInfiniteScroll from 'el-table-infinite-scroll';
16 
17 const exampleData = new Array(10).fill({
18   date: '2016-05-02',
19   name: '王小虎',
20   address: '上海市普陀区金沙江路 1518 弄'
21 });
22 
23 export default {
24   directives: {
25     'el-table-infinite-scroll': elTableInfiniteScroll
26   },
27   data() {
28     return {
29       tableData: exampleData
30     };
31   },
32   methods: {
33     load() {
34       this.$message.success('加载下一页');
35       this.tableData = this.tableData.concat(exampleData);
36     }
37   }
38 };
39 </script>
40 
41 <style scoped>
42 .el-table {
43    100%;
44 }
45 </style>

欢迎使用测试。。。