当前位置: 首页 > news >正文

Vue中使用el-table自定义序号翻页后又从1开始没有连续

在 ​​el-table​​​ 中,自定义序号列在翻页后会重新从 1 开始是因为每页的数据是重新渲染的,没有保留之前的序号。如果您希望在翻页后保持连续的序号,可以使用 ​​index​​ 属性来获取全局的行索引。

以下是一个示例,演示如何使用 ​​index​​ 属性来实现连续的序号:

<template>
  <el-table :data="tableData">
    <el-table-column label="序号">
      <template slot-scope="scope">
        <span>{{(currentPage-1) * pageSize + scope.$index + 1}}</span>
      </template>
    </el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据条数
      // 其他数据属性
    };
  },
  // 其他方法和钩子函数
};
</script>

在这个示例中,我们使用了 ​​slot-scope​​​ 来获取每一行数据的索引,并结合当前页码和每页显示的数据条数来计算连续的序号。​​currentPage​​​ 和 ​​pageSize​​ 是从外部传入的当前页码和每页显示的数据条数,您可以根据实际情况进行设置。

通过这种方式,无论翻页还是其他操作,序号都会保持连续。注意,如果您使用了筛选、排序等功能,可能需要对序号进行相应的调整。

http://www.dtcms.com/a/11950.html

相关文章:

  • C#面:ActionResult 和 ViewResult有什么不同?
  • 速盾:前端cdn加速是什么意思?
  • 深度学习入门-05
  • Windows10企业版找不到微软商店以及微软商店打不开问题解决
  • 7-11 矩阵转置
  • Datawhale AI夏令营 第五期 CV方向 Task1笔记
  • Android12平台上支持spi屏处理
  • 设计模式六大原则(一)--单一职责原则
  • python爬虫——入门
  • Docker 安装与配置 Docker Registry 指南
  • Prometheus 服务发现
  • (十七)Flink 容错机制
  • 封装websocket
  • UE5用蓝图实现物体A始终朝向物体B |Find Look at Rotation|
  • 网络攻击原理及过程
  • 遭遇“git”命令找不到的报错,开发者如何迅速应对
  • 深入学习SQL优化的第四天
  • Android fork 进程 process(init/Zygote/SystemServer)
  • 新课程研究是第一批学术期刊吗?
  • Django后端架构开发:从匿名用户API节流到REST自定义认证
  • 如何在 mind+ 中编写 python 程序
  • SQL 对版本进行排序遇到的问题
  • 软考架构-构件技术
  • 鸿蒙高级开发者认证题库
  • 谷粒商城实战笔记-261-商城业务-订单服务-页面环境搭建
  • 普通项目解决跨域问题和springSecurity解决跨域问题
  • 卸载重装redis
  • Linux自旋锁和读写锁
  • 用java实现的一个本地文件队列,支持并发消费与顺序消费
  • Spring Cloud Consul精选面试题及答案