vue中分页点击跳转刷新同时可自动跳转页码

 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 }

 

posted on 2021-08-23 17:00  一名小学生呀  阅读(469)  评论(0编辑  收藏  举报

导航