Vue2.0+ElementUI表格+Pagination实现的表格分页

Vue2.0+ElementUI+Pagination实现的表格分页

首先 el-table 和 el-pagination 是不同的组件的，所以不存在什么联系

• 表格

<div class="myclass">
      <el-table
      v-if="isActive"
      /************************重点就在于这里****************************/
        :data="tableData.slice((currpage - 1) * pageSize, currpage * pageSize)"
      /************************重点就在于这里****************************/
        :header-cell-style="{background:'#f3f1f2'}"
        style="width: 100%;border-radius:6px"
      >
        <el-table-column prop="orderNo" label="期数" width="160"></el-table-column>
        <el-table-column prop="number" label="号码" width="160"></el-table-column>
        <el-table-column prop="pattern" label="类型" width="160"></el-table-column>
        <el-table-column prop="symbol" label="symbol" width="160"></el-table-column>
        <el-table-column prop="createTime" label="投注时间" min-width="160"></el-table-column>
      </el-table>   
    </div>

• 分页

 <div align="center" style="margin-top:10px">
      <el-pagination
        layout="prev, pager, next, sizes, total, jumper"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>

• 数据 方法部分

  data() {
    return {   
      isActive: true,
      value: false,
      totalCount: 80,      
      tableData: [],   
      pageNum: 1,
      pageSize: 10,  
      currpage: 1
    };
  },



 methods: {
	 handleCurrentChange(cpage) {
      this.currpage = cpage; 
           console.log(this.currpage);
    },
    handleSizeChange(psize) {
      this.pageSize = psize;
           console.log(this.pageSize);
    },
    handleSelectionChange(val) {
      console.log(val);
    },
}

:data="tableData.slice((currpage - 1) * pageSize, currpage * pageSize)" 这里就是分页所在的重点之处了，根据用户切换每页显示多少行或者切换到那一页，都是可以控制