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