2021-08-09 element 表格前端做分页

    

     
//表格
       <el-table
            :data="
              listTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            style="width: 100%"
            border
            :header-cell-style="headerRowClass"
            max-height="43.75rem">
         </el-table>

//分页
           <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @next-click="nextClick"
              :current-page="currentPage"
              :page-sizes="[7, 10]"
              :page-size="pageSize"
              :pager-count="5"
              layout="prev,pager, next,sizes,total,jumper"
              :total="total"
            >
            </el-pagination>

//data 定义数据

      currentPage: 1, //当前页码
      pageSize: 7, //每页数据
      total：0//总页数

//method 方法

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {  
     this.currentPage = val;
    },

// listTableData是表格数据