# 2.2. Element-UI 分页操作
前端中后台项目基本使用 Element-UI 库, 本文重点介绍分页使用
# 简介
- 饿了么开源组件库
- github 4w+ star
- 访问官网 (opens new window)
# 效果图
# 基本用法
<el-pagination class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.pageIndex"
:page-sizes="[3, 5, 10, 15]"
:page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# data 定义
export default {
data() {
return {
listQuery: {
name: "",
pageIndex: 0,
pageSize: 10,
},
total: 0,
};
},
method: {
// 获取数据
getproducelist() {},
handleSizeChange(newSize) {
this.listQuery.pageSize = newSize;
this.getproducelist();
},
handleCurrentChange(current) {
this.listQuery.pageIndex = current;
this.getproducelist();
},
},
};
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
# css样式
/deep/ .pagination {
padding: 20px;
text-align: right;
.active {
background-color: #409EFF;
color: #fff;
margin: 0 5px;
}
.btn-prev {
background-color: #f4f4f5;
}
.btn-next {
background-color: #f4f4f5;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15