码迷,mamicode.com
首页 > 其他好文 > 详细

element之分页

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

标签:ons   color   src   bsp   --   image   lis   ntc   .post   

一,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之分页

标签:ons   color   src   bsp   --   image   lis   ntc   .post   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!