vue中使用Element-UI组件之分页 el-pagination 接上两篇文章

直接上代码  分页组件的使用

<template>
  <div class="allianceInfo">
<el-table ref="allianceData" :data="allianceData" style="width:100%" tooltip-effect="dark" bordered @selection-change="handleSelectionChange">
          
</el-table>
    
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="allianceConfig.pageNum" :page-sizes="pageList" :page-size="allianceConfig.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="allianceConfig.total"> </el-pagination>
        
  </div>
</template>

<script>
export default {
  data() {
    
    return {
      /**
       * 列表分页信息
       */
      allianceConfig: {
        pageNum: 1, //页码
        pageSize: 10, //每页数据量
        total: 0  //后台返回的总数据量
      },
      /**
       * 列表数据
       */
      allianceData: [], 这个直接赋值给table就行了
      //列表分页配置
      pageList: [10, 20, 50, 100],
      
     
     
      
    };
  },
  methods: {
    /**
     * 获取联盟列表接口
     */
    getAllianceList(flag) {
      if (flag) {
        this.allianceConfig.pageNum = 1;
      }
      this.$http
        .get("v1/channels", {
          pageNum: this.allianceConfig.pageNum,
          pageSize: this.allianceConfig.pageSize
        })
        .then(res => {
          if (res.code == 0) {
            this.allianceConfig.total = res.data.total;
            this.allianceData = res.data.rows; 
          }
        });
    },

   

    
    
    /**
     * 联盟列表页码切换
     */
    handleCurrentChange(page) {
      this.allianceConfig.pageNum = page; //页码切换赋值
      this.getAllianceList();
    },
    /**
     * 联盟列表每页数量切换
     */
    handleSizeChange(size) {
      this.allianceConfig.pageSize = size; //每页数据量赋值
      this.getAllianceList(true); 
    },
    

    
    
  },
  mounted() {
    this.getAllianceList();
  }
};
</script>

<style lang="less">

</style>