el-table分页后序号连续的两种方法

news2024/11/24 2:57:26

实现效果:

第一页排序到10,第二页的排序应从11开始

 

 

 实现方法一:

在el-table的序号列中使用template定义

<el-table>
  <el-table-column
          min-width="10%"
          label="序号"
        >
      <template slot-scope="scope">
            <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
       </template>
  </el-table-column>
</el-table>

实现方法二:

在el-table的序号列中进行index的方法定义,本质上还是进行了当前页码数乘以每页条数后加1的操作。

<el-table-column label="序号" type="index" :index="indexAdd" width="50" />

在methods中:

indexAdd(index) {
      const page = this.pageParams.page // 当前页码
      const pagesize = this.pageParams.pagesize // 每页条数
      return index + 1 + (page - 1) * pagesize
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用pymupdf实现PDF内容搜索并显示功能

简介&#xff1a; 在日常工作和学习中&#xff0c;我们可能需要查找和提取PDF文件中的特定内容。本文将介绍如何使用Python编程语言和wxPython图形用户界面库来实现一个简单的PDF内容搜索工具。我们将使用PyMuPDF模块来处理PDF文件&#xff0c;并结合wxPython构建一个用户友好的…

比例电磁铁控制放大器

GP63系列比例电磁铁应用于电液比例控制系统中&#xff0c;与比例控制放大器配套使用共同控制力士(REXROTH)型十通径螺纹比例阀。在额定行程及额定电流范围内&#xff0c;其输出力与输入电流成比例&#xff0c;通过内置反力弹簧&#xff0c;改变了输出力的特性&#xff0c;使系统…

能源存储蓄电池管理,0基础也能快速上手!

随着能源储存需求的不断增加&#xff0c;蓄电池作为关键的能量储存装置&#xff0c;其稳定性和性能的监测变得尤为重要。 蓄电池监控有助于提高能源系统的可靠性&#xff0c;确保连续供电&#xff0c;同时为维护人员提供及时的故障信息&#xff0c;以便他们能够迅速采取适当的措…

百望云联合华为发布票财税链一体化数智解决方案 赋能企业数字化升级

随着数据跃升为数字经济关键生产要素&#xff0c;数据安全成为整个数字化建设的重中之重。为更好地帮助企业发展&#xff0c;中央及全国和地方政府相继出台了多部与数据相关的政策法规&#xff0c;鼓励各领域服务商提供具有自主创新的软件产品与服务&#xff0c;帮助企业在合规…

【AutoLayout案例03-设置底部按钮之间相同间距 Objective-C语言】

一、好,咱们继续啊 1.咱们继续把autoLayout介绍一下 咱们的自动布局 给大家介绍一下 那么,自动布局呢 继续咱们给大家做的案例 做几个例子 把这几个例子做完以后 我们再给它 我们再给大家说一下,如何通过代码,来实现自动布局 虽然说,通过代码来实现自动布局,并不推荐 但…

AIF360入门教学

1、AIF360简介 AI Fairness 360 工具包(AIF360)是一个开源软件工具包&#xff0c;可以帮助检测和缓解整个AI应用程序生命周期中机器学习模型中的偏见。在整个机器学习的过程中&#xff0c;偏见可能存在于初始训练数据、创建分类器的算法或分类器所做的预测中。AI Fairness 360…

UI自动化测试(下拉框(select类),多窗口,属性,类的方法实战)

一、下拉框&#xff08;select类实现的&#xff09; 在UI的自动化测试实战中&#xff0c;如果遇到下拉框的选择&#xff0c;我们可以使用Select类里面的方法来具体进行定位和解决。下面我们使用HTML的代码来写一个下拉框的页面交互&#xff0c;让大家从直观上知道下拉框的交互…

Node工程的依赖包管理方式

在前端工程化中&#xff0c;JavaScript 依赖包管理是非常重要的一环。依赖包通常是项目所依赖的第三方库、工具和框架等资源&#xff0c;它们能够帮助我们减少重复开发、提高效率并且确保项目可以正确的运行。 目前比较常见的前端包管理器有 npm 和 Yarn&#xff0c;npm 是 No…

16.3.2 【Linux】程序的管理

程序之间是可以互相控制的。举例来说&#xff0c;你可以关闭、重新启动服务器软件&#xff0c;服务器软件本身是个程序&#xff0c; 你既然可以让她关闭或启动&#xff0c;当然就是可以控制该程序。 使用kill-l或者是man 7 signal可以查询到有多少个signal。主要的讯号代号与名…

Stable Diffusion 告别复制关键词,高质量提示词自动生成插件

在使用SD时,我们经常会遇到心中无想法,或不知如何描述心中所想的图像。有时由于提示词的选择不当,生成的图片质量也不尽如人意。为此,我今天为大家推荐一个高质量的提示词自动生成插件——One Button Prompt。 下面是他生成的一些样图。 文章目录 插件安装插件说明主菜单工…

【Linux】可重入函数 volatile关键字 以及SIGCHLD信号

可重入函数 volatile关键字 以及SIGCHLD信号 一、可重入函数1、引入2、可重入函数的判断 二、volatile关键字1、引入2、关于编译器的优化的简单讨论 三、SIGCHLD信号 一、可重入函数 1、引入 我们来先看一个例子来帮助我们理解什么是可重入函数&#xff1a; 假设我们现在要对…

基于Yolov5与LabelMe训练自己数据的图像分割完整流程

基于Yolov5与LabelMe训练自己数据的实例分割完整流程 1. Yolov5配置2. 创建labelme虚拟环境4. 接下来开始使用labelme绘制分割数据集4.1 json to txt4.2 划分数据集(可分可不分) 5. 训练 1. Yolov5配置 参照这边文章&#xff1a; https://blog.csdn.net/ruotianxia/article/de…

Python3,lmproof库,你不知道的小技能,这一篇给安排。

lmproof技能介绍 1、引言2、代码实战2.1 定义2.2 常用语法2.3 安装2.4 示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;鱼哥&#xff0c;我要考考你 小鱼&#xff1a;你要考考我&#xff1f; 小屌丝&#xff1a;是的啊&#xff0c; 我要考你&#xff0c; 小鱼&#…

ZooKeeper的应用场景(数据发布订阅、负载均衡)

ZooKeeper是一个典型的发布/订阅模式的分布式数据管理与协调框架&#xff0c;开发人员可以使用它来进行分布式数据的发布与订阅。另一方面&#xff0c;通过对ZooKeeper中丰富的数据节点类型进行交叉使用&#xff0c;配合Watcher事件通知机制&#xff0c;可以非常方便地构建一系…

DaVinci Resolve Studio 18 for Mac 达芬奇调色

DaVinci Resolve Studio 18是一款专业的视频编辑和调色软件&#xff0c;适用于电影、电视节目、广告等各种视觉媒体的制作。它具有完整的后期制作功能&#xff0c;包括剪辑、调色、特效、音频处理等。 以下是DaVinci Resolve Studio 18的主要特点&#xff1a; - 提供了全面的视…

【AGC】发布后应用信息支持设备不能删除问题

【关键字】 AGC、应用发布、兼容设备类型 【问题描述】 有开发者反馈发布新版本应用&#xff0c;应用信息可支持设备不能删除原有在架应用已选择的设备类型。发布应用问题&#xff0c;目前应用是面向车机开发的&#xff0c;在上一个开放性测试版本中&#xff0c;支持设备除了…

【vue】简洁优雅的火花线、趋势线

来由 在github发现个好看易用的vue趋势线组件&#xff0c;特此记录。 效果 趋势图生成后效果如上&#xff0c;线条为渐变色&#xff0c;可设置是否平滑。具体线条走势&#xff0c;根据数据动态生成。 使用 安装 npm i vuetrend -S 引入 import Vue from "vue"…

[已解决]使用sqlplus连接oracle,提示ORA-01034和ORA-27101

具体内容如下 PL/SQL Developer 处 登录时 终端处 登录时 ERROR: ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist Process ID: 0 Session ID: 0 Serial number: 0 解决方法是执行以下命令 sqlplus /nolog conn / as sysdba startup …

linux目录文件系统:磁盘分区情况

查看系统中的磁盘分区情况 使用命令&#xff1a; fdisk -l由上图可知&#xff0c;一共有4个磁盘分区&#xff1a; 分区1 &#xff1a; /dev/sdb分区2 : /dev/sda分区3: /dev/mapper/centos-root分区4&#xff1a; /dev/mapper/centos-swap查看有哪些目录/文件挂载在上面…

使用 Ploomber、Arima、Python 和 Slurm 进行时间序列预测

推荐&#xff1a;使用 NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 简短的笔记本说明 笔记本由 8 个任务组成&#xff0c;如下图所示。它包括建模的大多数基本步骤 - 获取数据清理、拟合、超参数调优、验证和可视化。作为捷径&#xff0c;我拿起笔记本并使用Soorgeon工具…