# element-ui 实现分页效果
# 思路
主要代码就是data.slice((page-1)*pageSize,page*pageSize)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <ul id="ul">
<li v-for="(item, index) in data.slice((page-1)*pageSize,page*pageSize)" :key="index" @click="list(item.id)">
<img :src="item.pic" alt="" style="width: 70px" />
<h1>{{ item.name }}</h1>
</li>
</ul>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[2, 5, 10, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="data.length">
</el-pagination>
//page-sizes这是下拉框可以选择的，每选择一行，要展示多少内容
//page-size显示当前行的条数
//total这是显示总共有多少数据，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| data() {
return {
data: [],
pageSize: 2,
page: 1,
};
},
methods: {
handleSizeChange(i) {
this.pageSize = i;
},
handleCurrentChange(i) {
this.page = i;
},
}
},
|
