关于el-table翻页后序号列递增的组件封装

需求说明:

        项目中经常会用到的一个场景,表格第一列显示序号(1、2、3...),但是在翻页后要递增显示序号,例如10、11、12(假设一页显示10条数据),针对这种情况,封装了一个vue的组件。

核心代码:

1,定义组件

<template><el-table-column type="index" label="序号" width="61"><template #default="scope">{{ (page - 1) * pageSize + scope.$index + 1 }}</template></el-table-column>
</template><script setup>
defineProps({// 当前页码page: {type: Number,default: 1,},// 每页显示数量pageSize: {type: Number,default: 10,},
});
</script>

2,父组件引用

<el-table v-loading="loading" :data="tableData" border><!-- 引用序号组件 --><TableIndexColumn :page="page.pageNo" :pageSize="page.pageSize" /><el-table-column prop="userName" label="用户名"><template #default="scope">{{ scope.row.employeeNo }}</template></el-table-column><el-table-column prop="email" label="邮箱"><template #default="scope">{{ scope.row.email }}</template></el-table-column>
</el-table>
<el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":layout="layout":page-sizes="pageSizes":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"
/>

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

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

相关文章

Elasticsearch的索引生命周期管理

目录 说明零、参考一、ILM的基本概念二、ILM的实践步骤Elasticsearch ILM策略中的“最小年龄”是如何计算的&#xff1f;如何监控和调整Elasticsearch ILM策略的性能&#xff1f; 1. **监控性能**使用/_cat/thread_pool API基本请求格式请求特定线程池的信息响应内容 2. **调整…

AI大模型开发原理篇-3:词向量和词嵌入

简介 词向量是用于表示单词意义的向量&#xff0c; 并且还可以被认为是单词的特征向量或表示。 将单词映射到实向量的技术称为词嵌入。在实际应用中&#xff0c;词向量和词嵌入这两个重要的NLP术语通常可以互换使用。它们都表示将词汇表中的单词映射到固定大小的连续向量空间中…

[内网安全] 内网渗透 - 学习手册

这是一篇专栏的目录文档&#xff0c;方便读者系统性的学习&#xff0c;笔者后续会持续更新文档内容。 如果没有特殊情况的话&#xff0c;大概是一天两篇的速度。&#xff08;实验多或者节假日&#xff0c;可能会放缓&#xff09; 笔者也是一边学习一边记录笔记&#xff0c;如果…

【学术会议征稿-第二届生成式人工智能与信息安全学术会议(GAIIS 2025)】人工智能与信息安全的魅力

重要信息 时间&#xff1a;2025年2月21日-23日 地点&#xff1a;中国杭州 官网&#xff1a;http://www.ic-gaiis.org 简介 2025年第二届生成式人工智能与信息安全将于 2025年2月21日-23日在中国杭州举行。主要围绕“生成式人工智能与信息安全”的最新研究展开&#xff0c;…

Vscode的AI插件 —— Cline

简介 vscode的一款AI辅助吃插件&#xff0c;主要用来辅助创建和编辑文件&#xff0c;探索大型项目&#xff0c;使用浏览器并执行终端命令&#xff08;需要多个tokens&#xff09;&#xff0c;可以使用模型上下文协议&#xff08;MCP&#xff09;来创建新工具并扩展自己(比较慢…

2024 CVPR Highlight Learning-Feedback

图像增强 Towards Robust Event-guided Low-Light Image Enhancement: A Large-Scale Real-World Event-Image Dataset and Novel Approach 解决的主要问题是低光照条件下的图像增强 通过多尺度整体融合分支提取事件和图像的结构和纹理信息&#xff0c;并引入信噪比&#xff0…

小白一命速通JS中的windowglobal对象

笔者注意到JS中的window对象与global对象经常被混淆&#xff0c;尽管它们在相当一部分使用情况下可以等同&#xff0c;但是本质上仍然存在很多不同&#xff0c;下面是对于两者的详细拆解 1. window 对象 定义&#xff1a;window 对象表示 浏览器环境中的全局上下文。作用域&am…

机器学习2 (笔记)(朴素贝叶斯,集成学习,KNN和matlab运用)

朴素贝叶斯模型 贝叶斯定理&#xff1a; 常见类型 算法流程 优缺点 集成学习算法 基本原理 常见方法 KNN&#xff08;聚类模型&#xff09; 算法性质&#xff1a; 核心原理&#xff1a; 算法流程 优缺点 matlab中的运用 朴素贝叶斯模型 朴素贝叶斯模型是基于贝叶斯…

HTB:Active[RE-WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 将靶机TCP开放端口号提取并保存 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用nmap对靶机…

Git图形化工具【lazygit】

简要介绍一下偶然发现的Git图形化工具——「lazygit」 概述 Lazygit 是一个用 Go 语言编写的 Git 命令行界面&#xff08;TUI&#xff09;工具&#xff0c;它让 Git 操作变得更加直观和高效。 Github地址&#xff1a;https://github.com/jesseduffield/lazygit 主要特点 主要…

58.界面参数传递给Command C#例子 WPF例子

界面参数的传递&#xff0c;界面参数是如何从前台传送到后台的。 param 参数是从界面传递到命令的。这个过程通常涉及以下几个步骤&#xff1a; 数据绑定&#xff1a;界面元素&#xff08;如按钮&#xff09;的 Command 属性绑定到视图模型中的 RelayCommand 实例。同时&#x…

selenium定位网页元素

1、概述 在使用 Selenium 进行自动化测试时&#xff0c;定位网页元素是核心功能之一。Selenium 提供了多种定位方法&#xff0c;每种方法都有其适用场景和特点。以下是通过 id、linkText、partialLinkText、name、tagName、xpath、className 和 cssSelector 定位元素的…

51单片机(STC89C52)开发:点亮一个小灯

软件安装&#xff1a; 安装开发板CH340驱动。 安装KEILC51开发软件&#xff1a;C51V901.exe。 下载软件&#xff1a;PZ-ISP.exe 创建项目&#xff1a; 新建main.c 将main.c加入至项目中&#xff1a; main.c:点亮一个小灯 #include "reg52.h"sbit LED1P2^0; //P2的…

29. C语言 可变参数详解

本章目录: 前言可变参数的基本概念可变参数的工作原理如何使用可变参数 示例&#xff1a;计算多个整数的平均值解析&#xff1a; 更复杂的可变参数示例&#xff1a;打印可变数量的字符串解析&#xff1a; 总结 前言 在C语言中&#xff0c;函数参数的数量通常是固定的&#xff…

RoboMaster- RDK X5能量机关实现案例(一)识别

作者&#xff1a;SkyXZ CSDN&#xff1a;https://blog.csdn.net/xiongqi123123 博客园&#xff1a;https://www.cnblogs.com/SkyXZ 在RoboMaster的25赛季&#xff0c;我主要负责了能量机关的视觉方案开发&#xff0c;目前整体算法已经搭建完成&#xff0c;实际方案上我使用的上…

shell脚本批量修改文件名之方法(The Method of Batch Modifying File Names in Shell Scripts)

shell脚本批量修改文件名方法 我们可以使用Shell脚本来实现这个功能。Shell脚本是一种用于自动化任务的编程语言&#xff0c;它可以在Unix/Linux操作系统上运行。在这个脚本中&#xff0c;我们将使用一个for循环来遍历目标目录下的所有文件&#xff0c;并使用mv命令将每个文件…

MySQL误删数据怎么办?

文章目录 1. 从备份恢复数据2. 通过二进制日志恢复数据3. 使用数据恢复工具4. 利用事务回滚恢复数据5. 预防误删数据的策略总结 在使用MySQL进行数据管理时&#xff0c;误删数据是一个常见且具有高风险的操作。无论是因为操作失误、系统故障&#xff0c;还是不小心执行了删除命…

RDK X5运行DeepSeek-R1-Distill-Qwen-1.5B,体验长思维链的语言大模型!

简介 本文介绍了在RDK X5上&#xff0c;如何从HuggingFace的原始模型权重&#xff08;safetensors&#xff09;经过量化和编译&#xff0c;的到llama.cpp推理框架所需要的GGUF格式的模型&#xff0c;然后演示了如何使用llama.cpp运行量化后的DeepSeek-R1-Distill-Qwen-1.5B模型…

SQL UCASE() 函数详解

SQL UCASE() 函数详解 在SQL中&#xff0c;UCASE() 函数是一个非常有用的字符串处理函数&#xff0c;它可以将字符串中的所有小写字母转换为大写字母。本文将详细介绍UCASE() 函数的用法、语法、示例以及其在实际应用中的优势。 一、UCASE() 函数简介 UCASE() 函数是SQL标准…

【Proteus仿真】【51单片机】简易计算器系统设计

目录 一、主要功能 二、使用步骤 三、硬件资源 四、软件设计 五、实验现象 联系作者 一、主要功能 1、LCD1602液晶显示 2、矩阵按键​ 3、可以进行简单的加减乘除运算 4、最大 9999*9999 二、使用步骤 系统运行后&#xff0c;LCD1602显示数据&#xff0c;通过矩阵按键…