vue項(xiàng)目中實(shí)現(xiàn)分頁效果，供大家參考，具體內(nèi)容如下
1.這里我們使用element-ui來實(shí)現(xiàn)，先使用npm安裝
|
1
|
npm i element-ui -S |
2.在main.js中全局引入
|
1
2
3
4
|
import ElementUI from "element-ui"import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI) //將element-ui掛在到全局 |
3.封裝組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<template> <div class="block"> <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="6" layout="prev, pager, next, jumper" :total="total" :pager-count="5" > </el-pagination> </div></template><script>export default { props: ["num", "page"], //傳入的總條數(shù)，和頁碼 data() { return {}; }, computed: { currentPage: function() { return this.page; }, total: function() { return this.num; } }, methods: { handleSizeChange(val) { this.$emit("size-change", val); }, handleCurrentChange(val) { this.$emit("current-change", val); } }};</script><style>.block { text-align: right; /* width: 100%; */}</style> |
4.引入組件并使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<template> <div class="mobild"> <div> <ATablePaging :num="num" :page="page" @current-change="(val) => { page = val; list(); }" ></ATablePaging> </div> </div></template><script>import ATablePaging from "../paging"; //引入分頁組件export default { data() { return { page:"", //當(dāng)前頁碼 num: 1, //內(nèi)容總條數(shù) }; }, methods: { list() { //發(fā)送的http請求 //后端返回的總頁數(shù)等于num }, }, mounted() { this.news(); }, components: { ATablePaging }};</script><style scoped></style> |
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/youngKing0615/article/details/108646438
