el-table实现滚动懒加载_el-table 滚动懒加载

• 插件地址 ：https://www.npmjs.com/package/el-table-infinite-scroll

安装 ：

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

安装时注意安装版本 V2,V3

注册：

全局注册 ：

import Vue from "vue";
import ElTableInfiniteScroll from "el-table-infinite-scroll";
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);

局部注册

<script>
import ElTableInfiniteScroll from "el-table-infinite-scroll";
 
export default {
  directives: {
    "el-table-infinite-scroll": ElTableInfiniteScroll,
  },
};
</script>

使用：

• v-el-table-infinite-scroll 传入加载的函数
• infinite-scroll-distance 可自定义底部距离多少触发加载
• infinite-scroll-disabled 控制何时禁用

• <template>
    <el-table
      v-el-table-infinite-scroll="load"
      :data="data"
      :infinite-scroll-disabled="disabled"
      height="200px"
    >
      <el-table-column type="index" />
      <el-table-column prop="date" label="date" />
      <el-table-column prop="name" label="name" />
      <el-table-column prop="age" label="age" />
    </el-table>
  </template>
   
  <script>
  const dataTemplate = new Array(10).fill({
    date: "2009-01-01",
    name: "Tom",
    age: "30",
  });
   
  export default {
    data() {
      return {
        data: [],
        page: 0,
        total: 5,
      };
    },
    methods: {
      load() {
        if (this.disabled) return;
   
        this.page++;
        if (this.page <= this.total) {
          this.data = this.data.concat(dataTemplate);
        }
   
        if (this.page === this.total) {
          this.disabled = true;
        }
      },
    },
  };
  </script>