1. 程式人生 > >vue分頁效果(iview)

vue分頁效果(iview)

<template>
  <div>
    
    <Page :total="total" :current="startRow" :page-size="endRow" @on-change="pageChange" @on-page-size-change="pagesizechange" show-sizer show-total></Page>
  </div>
</template>
<script>
  export default{
      data(){
        return{
          total:246,//總頁數
          startRow:1,//開始頁
          endRow:10,//每頁條數
        }
      },
      methods:{
        pageChange(page){
          this.startRow = page
        },
        pagesizechange(page){
          this.endRow = page
        }
      },
        query(){
            let data = Object.assign({
                pageSize: this.endRow,
                pageNum: this.startRow
            })
            this.http.post(BASE+'介面',data)
            .then(data=>{
                
            }).catch(err=>{})
        }
  }
</script>
<style>
</style>