vue分页功能

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default      {
    data () {
      return {
        num1: 1,
        id:3,
        tabelBox:[], //表格渲染数据
        type:1,
        pageNum:3, //当前页码值
        pagesize:5,//每页显示多少条数据
        total:400,//总记录条数

      }
     
  },
  methods:{
    //点击加入购物车1.拿到商品的id(组件启用props:true属性)2.拿到购买的数量
    addTocart(){
     console.log('商品数量'+this.num1)
    //拼出来一个对象：
    const goodsInfo = {id:this.id,count:this.num1}
    //调用mutations方法传递数据
    this.addgoos(goodsInfo)
    },
    //监听计数器数量改变变换；
    handleChange(value) {
      console.log(value);
    },
    ...mapMutations(['addgoos']),
    //请求列表数据
  async  getlistTalel(){
      const {data:res} = await this.$http.get('https://cnodejs.org/api/v1/topics?',{params:{type:this.type,limit: this.pagesize,page:this.pageNum}})
      console.log('分页结果')
      console.log(res)
      console.log(res.data)
      //this.total = res.data.total值（唯一需要后台配合的）
      this.tabelBox = res.data
    },
    //监听页码值改变的状态
    handleCurrentChange(newpage){
      console.log(newpage)
    this.pageNum = newpage
    this.getlistTalel()
   

    }
  },
  // props:['id'],
  created(){
   this.getlistTalel()
    },
    
    computed:{
      ...mapGetters(['totle'])
    }
  
  }

<template>
<div class="released-container">
  <!-- 面包屑 导航-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>融媒体中心</el-breadcrumb-item>
  <el-breadcrumb-item>移动商城</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card class="box-card">
 
  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
  <el-button type="primary" icon="el-icon-success" @click="addTocart">加入购物车</el-button>

  <el-button type="primary" icon="el-icon-bell">结算:{{totle}}</el-button>
  
 <el-table
    :data="tabelBox"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="来源详情:">
            <span><a :href="props.row.author.avatar_url" target="_blank">查看详情</a></span>
          </el-form-item>
          <el-form-item label="状态码">
            <span>{{ props.row.author.loginname }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="编号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="标题"
      prop="title">
    </el-table-column>
    <el-table-column
      label="评论量"
      prop="visit_count">
    </el-table-column>
  </el-table>

 <!-- 页码改变触发的方法handleCurrentChange -->
  <div class="block">
    <el-pagination
  
      @current-change="handleCurrentChange"
      :current-page="pageNum"

      :page-size="pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </el-card>

</div>
</template>

<script>
//使用mixins把行为分离，再使用mixins导入规范导入；
import mix  from './media-mixins.js'

export default      {
 mixins:[mix]
}
</script>


<style  lang="less" scoped>
.el-tag{
    margin:10px 5px;
}
.el-icon-caret-right{
    line-height: 50px;
}
.el-tabs{
      margin-top: 15px;
}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-tag{
    margin-top: -1px;
  }
</style>

image.png