el-table的无限滚动(效果比虚拟滚动更优)

步骤

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. 局部引用

4. 使用 

 



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);
      }
    },
  }
   
};

你可能感兴趣的:(vue,vue,elementui,前端)