安装 :
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>