标签：newPage el newSize pagenum 分页 pagesize queryInfo selectForm 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。