el-table的无限滚动（效果比虚拟滚动更优）_el-table-infinite-scroll

步骤

1. 前端安装“save el-table-infinite-scrol”

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

2. 全局引用，在main.js中引用

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

3. 局部引用

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

4. 使用 

 <el-table
        class="elTable"
        border
        height="100%"
        :data="tableData"
        :span-method="spanMethod"
        :cell-class-name="cellClassName"
        :cell-style="{ borderColor: '#DBDBDB' }"
        :header-cell-style="{ borderColor: '#DBDBDB' }"
        v-loading="loading"
        v-el-table-infinite-scroll="loadTable"
      >
 
</el-table>
 
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  name: "PlatForm",
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll
  },
  data() {
    return {
       test:"test"
    };
  },
  methods: {
    // 加载table
    loadTable() {
      if (this.tableData.length < this.allData.length) {
        const data = this.tableData.concat(
          this.allData.slice(this.tableData.length, this.tableData.length + this.count)
        );
        this.$set(this, "tableData", data);
      }
    },
  }
   
};