<el-table> 上实现无限滚动加载

在线示例:https://yujinpan.github.io/el-table-infinite-scroll/

此指令依赖于 element-ui如下两个组件

# 使用

安装
npm install --save el-table-infinite-scroll
全局引入
import Vue from 'vue';
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
    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>
注意事项
  • 需要给table设置高度,如果没有,指令或默认取400px。如果不想要这个高度,请自己设置100%或auto来改变这个属性
  • 默认有进入加载,如果想手动实现第一次加载,可以设置flag来标识,但要注意此时对于滚动至底部的加载页应该从第二页开始。建议使用指令默认的首次加载

推荐阅读更多精彩内容