基於vue語法
分頁加載（vue+element -ui）
<template>
<div>
<el-pagination
class="pagination"
background
layout="prev, pager, next"
:pageSize="pageSize"
:total="total"
@current-change="handleChange"
>
</el-pagination>
</div>
</template>
<script>
import { Pagination, Button } from "element-ui"; //局部引入分頁組件
export default {
name: "demo",
components: {
[Pagination.name]: Pagination,
},
data() {
return {
pageSize: 3,
pageNum: 1,
total: 0,
};
},
mounted() {
this.getOrderList();
},
methods: {
getOrderList() {
this.axios
.get("/orders", {
params: {
pageSize: this.pageSize,
pageNum: this.pageNum,
},
})
.then((res) => {
this.list = res.list;
this.total = res.total;
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
//分頁器分頁
handleChange(pageNum) {
this.pageNum = pageNum;
this.getOrderList();
},
},
};
</script>
<style></style>
加載更多
點擊按鈕加載更多，始終一屏顯示，加載數據拼接在原數據后面！
<template>
<div>
<el-button type="primary" :loading="loading" @click="loadMore"
>加載更多</el-button
>
</div>
</template>
<script>
import { Button } from "element-ui"; //局部引入分頁組件
export default {
name: "demo",
components: {
[Button.name]: Button,
},
data() {
return {
pageSize: 3,
pageNum: 1,
};
},
mounted() {
this.getOrderList();
},
methods: {
getOrderList() {
this.axios
.get("/orders", {
params: {
pageSize: this.pageSize,
pageNum: this.pageNum,
},
})
.then((res) => {
this.list = this.list.concat(res.list);//拼接原數據
this.total = res.total;
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
loadMore() {
this.getOrderList();
},
},
};
</script>
<style></style>