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

ops/2024/11/15 6:09:37/

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

    },

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

 


http://www.ppmy.cn/ops/89508.html

相关文章

【前端面试】七、算法-Math、数组、数据结构等

目录 1.Math 2.数组 3.常见数据结构 4.设计模式 1.Math Math.abs:求绝对值&#xff1b;Math.sign:判断正负&#xff0c;求数值符号Math.ceil:向上取整&#xff1b; Math.floor:向下取整&#xff1b; Math.round:四舍五入Math.max:求最大值&#xff1b;Math.min:求最小值Ma…

打造智能体育赛事分析:YOLO目标检测系统详解

一、项目简介 1. 项目背景 随着体育赛事直播和分析需求的增加&#xff0c;自动检测和识别体育赛事中的目标&#xff08;如球员、球、裁判等&#xff09;变得非常重要。深度学习技术&#xff0c;尤其是YOLO&#xff08;You Only Look Once&#xff09;模型&#xff0c;因其高效…

PyFilesystem2 - Python 操作文件系统

文章目录 一、关于 PyFilesystem2二、安装三、快速使用四、指南为什么要使用 PyFilesystem &#xff1f;打开文件系统树打印关闭目录信息子目录处理文件遍历 WalkingGlobbing移动和复制 五、概念路径系统路径沙盒错误 六、资源信息信息对象命名空间基本命名空间细节命名空间访问…

Linux shell编程学习笔记68: curl 命令行网络数据传输工具 选项数量雷人(上)

0 前言 在网络时代&#xff0c;有经常需要在网络上传输数据&#xff0c;时我们需要通过网络下载文件&#xff0c;为了满足这种时代需要&#xff0c;Linux提供了众多网络命令&#xff0c;我们今天先研究curl命令。例如&#xff0c;我们可以使用 curl 从 URL 下载文件&#xff0…

【Kafka】对 kafka 消费程序客户端进行监控采集

前言 对于 Kafka 组件而言&#xff0c;我们通常会对 kafka 服务端添加一些监控&#xff0c;来确保服务的稳定性&#xff0c;虽然有 kafka-exporter 来对消费者进行监控&#xff0c;但是指标很少&#xff0c;对于生产者和消费者更细粒度的监控就无法做到了。只能将监控部署在客…

Spring Boot常用注解

一&#xff0c;核心注解 1&#xff0c; SpringBootApplication 用途&#xff1a;标注一个主程序类&#xff0c;表明是一个SpringBoot应用程序的入口。 功能&#xff1a;这是一个复合注解&#xff0c;组合了ComponentScan&#xff0c;EnableAutoConfiguration&#xff0c;Spr…

用uniapp 及socket.io做一个简单聊天app 5

聊天中的通知及好友申请&#xff1a; 如下图效果 聊天的效果&#xff1a; 这里的friends&#xff0c;好友例表&#xff0c;里面有相关代码&#xff1a; <template><view class"friends-container"><view v-if"!isLoggedIn" class"…

记录一次网站疑似被劫持的排查

场景&#xff1a;早上的时候发现广州地区不能正常访问官网&#xff0c;其他地区访问网站时正常的。请网信安同事排查是否封堵了广州地区&#xff0c;发现并没有封堵现象。其他同事建议做如下排查&#xff0c;并建议上线CDN&#xff0c;在CDN段做配置&#xff0c;避免网站被劫持…