首页 > 其他 > 详细

element之分页

时间:2019-02-14 11:42:41      阅读:222      评论:0      收藏:0      [点我收藏+]

一,HTML

<el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :page-size="pageSize"
                background
                layout="prev, pager, next"
                :total="this.allpage"
                :current-page.sync="currentPage"
                >
</el-pagination>

二,script    

<script>
    export default{

      name:app,
      data(){
         pageSize:4,  //每页显示多少条
         allpage:‘‘,
         currentPage:1 //页数

      },
      methods:{
          handleCurrentChange(val){
               this.currentPage = val
           this.list(); //显示列表的接口
       },
       /**当前条数***/
     handleSizeChange(size){
             this.pageSize = size;
             this.list();
     },
         /**显示列表接口**/
    list(){
        let obj = this.qs.stringify({
               page:this.currentPage,
               count:this.pageSize
        })
        this.$axios.post(l接口名称, obj, res => {
            console.log(res);
        }, f => {
        console.log(f)
        }, e => {
        console.log(e)
        }) 
      }

    }
  }
</script>

 图示:

    技术分享图片

 

                          

                                                                                                                                                                                                              --------END

 

element之分页

原文:https://www.cnblogs.com/liujiajiablog/p/10373656.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!