el-table 表格序号列前端实现递增,切换分页不从头开始

06dc70f0d8b54aebb7b447585bb0734f.png

   af28c1223492407898115cefb88a4af0.png

<el-table-column type="index" width="55" label="序号" :index="hIndex">

      </el-table-column>

分页

 <el-pagination

      @size-change="handleSizeChange" @current-change="handleCurrentChange">

    </el-pagination>

data中: 

   pageObj: {

        pagesize: 10,

        currpage: 1,

        pageIndexCopy: 1,

      },

 

方法中:

 hIndex(index) {

      // 当前页数 - 1 * 每页数据条数 + index + 1 ( index 是索引值,从0开始)

      return (this.pageObj.pageIndexCopy - 1) * this.pageObj.pagesize + index + 1

    },

  handleCurrentChange(val) {

      this.pageObj.currpage = val

      this.pageObj.pageIndexCopy = val

    },

其实正常后端也可以直接返回,前台就不用做这些了

 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值