分页
... 2021-7-29 About 3 min
# 分页
# 页码和条数
页码:1
条数:10
总数:1000
currentPage当前页码，total总条数，pageSize每页多少条数据
<p>
页码:{{page.currentPage}}
<el-button type="primary" @click="page.currentPage=page.currentPage+1">页码+1</el-button>
</p>
<p>
条数:{{page.pageSize}}
<el-button type="primary" @click="page.pageSize=page.pageSize+10">条数+10</el-button>
</p>
<p>
总数:{{page.total}}
<el-button type="primary" @click="page.total=page.total+10">总页数+10</el-button>
</p>
<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>
<script>
export default {
data() {
return {
page:{
total: 1000,
currentPage: 1,
pageSize: 10
},
data: [],
option: {
header:false,
column:[{
label:'姓名',
prop:'name'
}]
}
}
}
}
</script>
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
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
Expand Copy Copy
# 设置最大页码按钮数
pagerCount属性默认为7
<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>
<script>
export default {
data() {
return {
page:{
pagerCount:11,
total:1000
},
data: [],
option: {
header:false,
column:[{
label:'姓名',
prop:'name'
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 无背景色的分页
background属性默认为true
<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>
<script>
export default {
data() {
return {
page:{
background:false,
total:1000
},
data: [],
option: {
header:false,
column:[{
label:'姓名',
prop:'name'
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 附加功能
layout属性中的每一项都是附加功能，可以自行操作
<el-button type="small" @click="page.layout='sizes,pager'">简单模式</el-button>
<el-button type="small" @click="page.layout='total, sizes, prev, pager, next, jumper'">复杂模式</el-button>
<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>
<script>
export default {
data() {
return {
page:{
total:1000,
layout: "total, sizes, prev, pager, next, jumper",
},
data: [],
option: {
header:false,
column:[{
label:'姓名',
prop:'name'
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Expand Copy Copy
# 综合用法
Tips
- 配合增删改查方法去使用实现完整的表格功能
{
"pageSize": 20,
"pagerCount": 5
}
首次加载调用on-load方法加载数据，返回page分页对象信息,赋值page的total总条数即可,如果total为0的话，或者simplePage为true只有1页的时候，分页选择器会隐藏
{{page}}
<avue-crud
:data="data"
:option="option"
:page.sync="page"
@on-load="onLoad"
></avue-crud>
<script>
export default {
data() {
return {
page: {
pageSize: 20,
pagerCount:5
},
data: [],
option: {
align: 'center',
menuAlign: 'center',
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
]
}
}
},
methods: {
onLoad(page) {
this.$message.success('分页信息:' + JSON.stringify(page))
this.page.total = 40
//模拟分页
if (this.page.currentPage === 1) {
this.data = [
{
id:1,
name: '张三',
sex: '男'
},{
id:2,
name: '李四',
sex: '女'
}
]
} else if (this.page.currentPage == 2) {
this.data = [
{
id:3,
name: '王五',
sex: '女'
},{
id:4,
name: '赵六',
sex: '女'
}
]
}
}
}
}
</script>
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
Expand Copy Copy
# 自定义分页
{
"currentPage": 1,
"total": 40,
"layout": "total,pager,prev, next",
"background": false,
"pageSize": 10
}
实际的用法要后台配置，将后台返回值赋值给 page 中的属性， page就是分页对象注入，page 对象中的total为总页数，pageSizes为分页信息，currentPage为当前第几页，pageSize每一页加载多少条数据，点击页码会调用current-change方法回调当前页数，返回当前第几页，点击每页多少条会调size-change方法回调
{{page}}
<avue-crud
:data="data"
:option="option"
:page.sync="page"
@size-change="sizeChange"
@current-change="currentChange"
></avue-crud>
<script>
export default {
data() {
return {
page: {
currentPage: 1,
total: 0,
layout: "total,pager,prev, next",
background:false,
pageSize: 10
},
data: [],
option: {
align: 'center',
menuAlign: 'center',
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
]
}
}
},
created() {
this.getList()
},
methods: {
getList() {
this.page.total = 40
if (this.page.currentPage === 1) {
this.data = [
{
id:1,
name: '张三',
sex: '男'
},{
id:2,
name: '李四',
sex: '女'
}
]
} else if (this.page.currentPage == 2) {
this.data = [
{
id:3,
name: '王五',
sex: '女'
},{
id:4,
name: '赵六',
sex: '女'
}
]
}if (this.page.currentPage === 1) {
this.data = [
{
id:1,
name: '张三',
sex: '男'
},{
id:2,
name: '李四',
sex: '女'
}
]
} else if (this.page.currentPage == 2) {
this.data = [
{
id:3,
name: '王五',
sex: '女'
},{
id:4,
name: '赵六',
sex: '女'
}
]
}
},
sizeChange(val) {
this.page.currentPage = 1
this.page.pageSize = val
this.getList()
this.$message.success('行数' + val)
},
currentChange(val) {
this.page.currentPage = val
this.getList()
this.$message.success('页码' + val)
}
}
}
</script>
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
Expand Copy Copy