安裝
npm install --save el-table-infinite-scroll
引入
全局
import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';
Vue.use(elTableInfiniteScroll);
局部
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
directives: {
'el-table-infinite-scroll': elTableInfiniteScroll
}
}
使用
<template>
<el-table
border
height="400px"
v-el-table-infinite-scroll="load"
element-loading-text="數(shù)據(jù)獲取中"
element-loading-spinner="el-icon-loading"
:data="tableData"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
load() {
this.pageNum = ++this.pageNum;
this.init();
}
async init() {
const params = {
pageNum: this.pageNum,
pageSize: 20,
};
const res = await axios.getlist(params).catch((e) => {
console.log(e);
});
if (!res.data.code) {
this.tableData = this.tableData.concat(res.data.list);
}
}
