1 //分页组件
2 <div class="page">
3 <el-pagination
4 small
5 @current-change="handleChange"
6 prev-text="上一页"
7 next-text="下一页"
8 background
9 :page-size="pageble.size"
10 :current-page="pageble.page"
11 layout="prev, pager, next"
12 :total="parseInt(total)">
13 </el-pagination>
14 </div>
15
16 data () {
17 return{
18 pageble: {//1页显示几条数据
19 page: 1,
20 size: 4
21 },
22 total: '',//总页数
23 pages: 1,//自动跳转初始页数
24 }
25 },
26
27 methods: {
28 //点击分页事件
29 handleChange (val) {
30 this.pageble.page = val;//点击的第几页
31 this.partyMemberList();//调接口
32 },
33 //调接口赋值
34 partyMemberList () {
35 this.$api.partyMemberList(this.pageble).then(res => {
36 console.log(res,'信息')
37 this.memberList = res.data.data.list || []
38 this.total = res.data.data.total
39 })
40 },
// 每页4条数据,当除4有余时,页数要加1
41 timerChange () {
42 if (this.total % 4 != 0) {
43 pags++
44 }
45 this.pages <= this.total / 4 ? this.pages++ : this.pages = 1
46 this.handleChange(this.pages)
47 },
48 },
49
50 mounted () {
51 const timer = setInterval(() => { //分页定时器自动跳转页数
52 this.timerChange();
53 }, 10000)
54 }
![]()