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

    },

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/391059.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day29 | 动态规划 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

语言 Java 509. 斐波那契数 斐波那契数 题目 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n -…

Java 中的缓冲流

字符流 前面学习的字节流和字符流都是基本流&#xff0c;其中字符流的底层其实已经在内存中创建了一个长度为8192的字节数组作为缓存区。而字节流中则是没有的。 在内存中增加缓冲区的目的是为了减少内存与硬盘的交互的次数&#xff0c;因为这一操作比较耗时。 下面是一个图…

Pr2024苹果(mac)版剪辑软件安装下载(附下载链接)

Adobe Premiere Pro 2024&#xff08;简称PR 2024&#xff09;是一款由Adobe公司开发的专业视频编辑软件&#xff0c;被广泛应用于电影、电视、广告和社交媒体视频的制作。以下是对PR 2024的详细简介&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rN-3kB3KQgn0JswDa…

基于PFC和ECN搭建无损RoCE网络的工作流程分析

无损RoCE网络概念 RDMA&#xff08;Remote Direct Memory Access&#xff0c;远程直接内存访问&#xff09;是一种为了解决网络传输中服务器端数据处理延迟而产生的技术。RDMA 将用户应用中的数据直接传入服务器的存储区&#xff0c;通过网络将数据从一个系统快速传输到远程系…

Leetcode第136场双周赛题解(c++)

题外话 也是好久没有更新力扣比赛的题解了&#xff0c;前段时间也是比较忙&#xff08;说的好像现在不忙一样哈哈&#xff09;&#xff0c;像我等菜鸟&#xff0c;一般都是保二进三四不写的&#xff0c;笑死。 题目一.求出胜利玩家的数目 给你一个整数 n &#xff0c;表示在…

MySQL·事务

目录 事务是用来做什么的&#xff1f; 什么是事务&#xff1f; 为什么会出现事务 事务提交方式 事务操作前提了解 事务常见操作方式 读未提交(RU) 读提交(RC) 可重复读(RR) 串行化 一致性(Consistency) 事务是用来做什么的&#xff1f; CURD不加控制&#xff0c;会…

Phalco安装过程以及踩的一些坑(mac环境)

一 背景 公司用Phalcon框架好长时间了,中途发现了一些Phalcon使用的上的问题,于是想在本地搭建一套Phalcon的环境,方便排查问题使用。 二 Mac系统下的安装 看了很多说法,最终发现还是官网给力,安装Phalcon使用下列命令即可(前提条件是PHP已安装好,工具pecl也安装好了):…

现代C++多线程编程:C++20 jthread全面解析

目录 一、引言 二、jthread 的基本特点和优势 自动 join 机制 线程取消功能 相对于 std::thread 的改进和便利 三、jthread 的工作原理 线程的生命周期管理 线程取消机制的实现和使用方法 四、jthread 的实际应用案例 服务器编程中的应用 高性能计算中的应用 实时系…

JVM知识总结(内存结构)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 内存模型 内存结构 堆&#xff1a; 存放对象实例, 几乎所有的对象…

GUI:Tkinter(一)

Tkinter文档 一&#xff0c;Tkinter基本流程 1. 创建应用程序主窗口对象 from tkinter import * window Tk() window.mainloop()#开启主循环 2. 在主窗口中&#xff0c;添加各种可视化组件&#xff0c;比如&#xff1a;按钮&#xff08;Button&#xff09;、文本框&#x…

[CP_AUTOSAR]_系统服务_DEM模块(三)功能规范之诊断事件定义

目录 1、诊断事件定义1.1、Event priority&#xff08;事件优先级&#xff09;1.2、Event occurrence&#xff08;事件发生计数器&#xff09;1.3、Event kind&#xff08;事件类别&#xff09;1.4、Event destination&#xff08;故障内存&#xff09;1.5、Diagnostic monitor…

springboot系列教程(三十):springboot整合Zookeeper组件,管理架构中服务协调

一、Zookeeper基础简介 1、概念简介 Zookeeper是一个Apache开源的分布式的应用&#xff0c;为系统架构提供协调服务。从设计模式角度来审视&#xff1a;该组件是一个基于观察者模式设计的框架&#xff0c;负责存储和管理数据&#xff0c;接受观察者的注册&#xff0c;一旦数据…

【数据结构】链表篇

文章目录 1.链表的概念以及结构2.链表的分类2.1 单向或者双向2.2 带头或者不带头2.3 循环或者不循环2.4 无头单向非循环链表和带头双向循环链表 3.单链表的实现3.1 准备工作3.2 节点的创建3.3 单链表的释放3.4 打印链表3.5 单链表的尾插3.6 单链表的尾删3.7 单链表头删3.8 单链…

TiDB系列之:TiCDC同步TiDB数据库数据到Kafka集群Topic

TiDB系列之&#xff1a;TiCDC同步TiDB数据库数据到Kafka集群Topic 一、Changefeed 概述Changefeed 状态流转操作 Changefeed 二、同步数据到Kafka创建同步任务&#xff0c;复制增量数据 KafkaSink URI 配置 kafka最佳实践TiCDC 使用 Kafka 的认证与授权TiCDC 集成 Kafka Connec…

搭建高可用OpenStack(Queen版)集群(一)之架构环境准备

一、搭建高可用OpenStack&#xff08;Queen版&#xff09;集群之架构环境准备 一、架构设计 二、初始化基础环境 1、管理节点创建密钥对&#xff08;方便传输数据&#xff09; 所有控制节点操作 # ssh-keygen #一路回车即可 Generating public/private rsa key pair. Enter f…

算法通关:016:设计循环双端队列

文章目录 题目思路代码运行结果问题为什么能直接调用方法名 题目 leetcode641 设计循环双端队列 思路 代码 import java.util.Deque; import java.util.LinkedList;/*** Author: ggdpzhk* CreateTime: 2024-08-03* 641 双端队列&#xff1a;利用双向链表和动态数组实现*/ pu…

C#和S7-1200PLC S7.NET通信

1、一步步建立一个C#项目 一步步建立一个C#项目(连续读取S7-1200PLC数据)_s7协议批量读取-CSDN博客文章浏览阅读1.7k次,点赞2次,收藏4次。这篇博客作为C#的基础系列,和大家分享如何一步步建立一个C#项目完成对S7-1200PLC数据的连续读取。首先创建一个窗体应用。_s7协议批量…

【uniapp离线打包】(基于Android studio)

文章目录 uniapp打包官方教程入口一、准备工作(工具三大件)Android Studio版本推荐 二、准备工作&#xff08;Android壳和uniapp包&#xff09;导入Android壳生成uniapp包将uniapp包导入android壳降低jdk版本 三、准备工作&#xff08;证书&#xff09;准备Android平台离线签名…

SpringSecurity-1(认证和授权+SpringSecurity入门案例+自定义认证+数据库认证)

SpringSecurity 1 初识权限管理1.1 权限管理的概念1.2 权限管理的三个对象1.3 什么是SpringSecurity 2 SpringSecurity第一个入门程序2.1 SpringSecurity需要的依赖2.2 创建web工程2.2.1 使用maven构建web项目2.2.2 配置web.xml2.2.3 创建springSecurity.xml2.2.4 加载springSe…

50 选择结构

常见的选择结构有单分支选择结构、双分支选择结构、多分支选择结构及嵌套的分支结构&#xff0c;也可以构造跳转表来实现类似的逻辑。循环结构和异常处理结构中也可以实现带有 else 子句&#xff0c;可以看作特殊形式的选择结构。 所有的 Python 合法表达式都可以作为条件表达…