el-table 分页

<el-table
        :data="
          taskData.slice(
            (queryInfo.pagenum - 1) * queryInfo.pagesize,
            queryInfo.pagenum * queryInfo.pagesize
          )
        "
        border
        height="48vh"
        size="mini"
        :header-cell-style="{
          'text-align': 'center',
          'background-color': '#eee',
          color: '#55555',
        }"
        :cell-style="cellStyle"
      >
        <el-table-column label="序号" width="50px" fixed>
          <template slot-scope="scope"
            ><span
              >{{ scope.$index + (queryInfo.pagenum - 1) * queryInfo.pagesize + 1 }}
            </span></template
          >
        </el-table-column>
        <el-table-column label="所属项目" sortable prop="project_Name"> </el-table-column>
        <el-table-column label="发布人" width="80px" prop="mission_Publisher_Name">
        </el-table-column>
 </el-table>
<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="taskData.length"
        background
      ></el-pagination>
 
return {
      // 查询参数对象
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
//任务表格
      taskData: [],
 
}
 
方法
 handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.selectTask();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.selectTask();
    },

后台分页

 //获取库存产品列表
    getProductList() {
      this.selectForm["PageIndex"] = this.queryInfo.pagenum;
      this.selectForm["PageCount"] = this.queryInfo.pagesize;

data = taskdata

标签：newPage,el,newSize,pagenum,分页,pagesize,queryInfo,selectForm,table
来源： https://blog.csdn.net/huobaotianwang/article/details/119238055