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

[TOC]

在线示例：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 无限滚动指令

使用

安装

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>

更多扩展组件：
el-select-tree