vue分页

<template>
  <div>
    <div class="panel panel-primary" style="margin:20px;">
        <!-- 头部 -->
        <div class="panel-heading">
            <h1 style="display: inline-block;">商品信息统计表</h1>
            <span>客户总数
              <span class="label label-warning" >200</span>
            </span>
        </div>
      
        <!-- 内容 -->
        <div class="panel-body">
            <table class="table table-condensed">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>商品名称</th>
                  <th>商品价格</th>
                  <th>商品详情</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,i) in items" :key="i">
                  <td>{{num(i)}}</td>
                  <td>{{item.product_name}}</td>
                  <td>{{item.product_price |NumFilter(2)}}</td>
                  <td><button type="button" class="btn btn-success btn-sm">查看详情</button></td>
                </tr>
                              
              </tbody>
            </table>
        </div>
         <!--分页-->
          <nav aria-label="Page navigation" style="text-align: center;">
              <ul class="pagination">
                  <li :class="{disabled:page.pageNo<=1}" @click="pagePre()" >
                      <a aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                      </a>
                  </li>
                  <li :class="{active:index==page.pageNo}" v-for="index in pages" :key='index'  @click="curPage(index)"> 
                      <a>{{index}}</a>
                  </li>
                  <li  @click="pageNext()" :class="{disabled:page.pageNo>=page.pageTotal}">
                      <a aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                      </a>
                  </li>
              </ul>
          </nav>
      </div>

  </div>
</template>
<script>
export default {
  name: 'Demo',
  data () {
    return {
      items:[],
      page:{
        pageTotal:1, //总页数
        rows:1, //总数量
        pageNo:1, //页码
        pageSize:10 //条数
      }
    }
  },
   methods:{
     getList(i){
        this.page.pageNo = i || this.page.pageNo;
        this.$http({
         method:'get',
         url:`http://47.96.117.121:7002/home/page/${this.page.pageNo}/${this.page.pageSize}`,
       }).then(res=>{
         console.log(res);
         this.items = res.data.data;
         this.page.pageTotal = res.data.pageTotal; //总页数
         this.page.rows = res.data.rows;//总数量
       }).catch(error=>{

       })
     },
     pagePre(){  //上一页
        if(this.page.pageNo >1){
          this.page.pageNo--;
          this.getList(this.page.pageNo)
        }
     },
     curPage(index){  //当前页
        this.getList(index)
     },
     pageNext(){ //下一页
        if(this.page.pageNo < this.page.pageTotal){
          this.page.pageNo++;
      this.getList(this.page.pageNo)
        }
     }
  },
  mounted(){
    this.getList();
  },
  filters:{
    NumFilter:function(data,n){
      return '￥'+data.toFixed(n)
    }
  },
  computed:{
    num(){
      return function(i){
        return (this.page.pageNo-1)*this.page.pageSize+i+1;
      }
    },
    pages () {
      let start = this.page.pageNo;
      let end = this.page.pageTotal;
      if (start <= 5) {  //页码小于5
          return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', end]
      } else if (start >= end - 4) { //页码大于21-4
          return [1, '...', end-8, end-7, end-6, end-5, end-4, end-3, end-2, end-1, end]
      } else {  //5-17之间
          return [1, '...', start-3, start-2, start-1,start, start+1, start+2, start+3, '...', end]
      } 
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>