表格操作之el-table翻页时序号累计

本文介绍了如何在HTML中结合Vue.js来显示动态分页时的序号。通过两种方式实现:直接在模板中计算序号,或者通过自定义方法计算。同时,提供了完整的分页组件代码示例,包括分页配置、样式和事件监听。这种方法适用于前端开发中的数据展示和分页处理。
摘要由CSDN通过智能技术生成

可以直接写在html里,上代码:

		<el-table-column label="序号" type="index" width="60" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.$index + (pageFilter.current - 1) * pageFilter.size + 1 }}
          </template>
        </el-table-column>

也可以通过方法去设置翻页序号累加:

<el-table-column type="index" label="序号" width="50" align="center" :index="computeTableIndex" />
computeTableIndex(index) {
      return (this.pageFilter.current - 1) * this.pageFilter.size + index + 1
 }

个人觉得直接在template里面写最简单
附上分页代码:

	  <el-pagination
        :page-sizes="[10, 30, 50,100]"
        :current-page.sync="pageFilter.current"
        :page-size.sync="pageFilter.size"
        :total="pageFilter.total"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        class="m-top-10"
        @size-change="getSourceData"
        @current-change="getSourceData"
      />
  pageFilter: {
    current: 1,
    size: 10,
    total: 0
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值