vxe-table的序号一样

使用vxe-table的时候,有的时候会出现序号相同的现象,这种现象一般出现在我们后面自己添加的行中,就像这种

此时的这三个序号是相同的,我来说一下原因,这是在添加新的一行的时候,有的时候数据很多,我们不想一个个的写,就直接复制之前表格中的某一行,然后在改变其中的某一个属性,这个就会出现序号相同的情况

解决方法:

把新复制某一行的对象的 _X_ROW_KEY 赋值为 null 就可以了

看代码

<template><div><el-button type="primary"@click="addRow">添加一行</el-button><vxe-table borderheight="300":row-config="{isHover: true}":data="tableData"><vxe-column type="seq"title="序号"width="80"></vxe-column><vxe-column field="name"title="Name"sortable></vxe-column><vxe-column field="sex"title="Sex"></vxe-column><vxe-column field="age"title="Age"></vxe-column><vxe-column field="address"title="Address"show-overflow></vxe-column></vxe-table></div>
</template><script>
import { cloneDeep } from 'lodash-es'
export default {data () {return {tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }],}},methods: {addRow () {// 假如每一行对象的数据很多,我们像添加的一行只改变其中的某个属性,其余保持一样const obj = cloneDeep(this.tableData[0])obj.name = 'Test5'//   const obj = {  // 一样的结果,新添加的行序号也是一样//     ...this.tableData[0],//     name: 'Test5'//   }//   !!!把下面这行注释解开就可以成功解决问题了//   obj._X_ROW_KEY = nullthis.tableData.push(obj)}}
}</script>

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

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

相关文章

Mac 运行 Windows 软件,Parallels Desktop 19和 CrossOver 24全面对比

Parallels Desktop 和 CrossOver 都是能满足你「在 Mac 上运行 Windows 软件」需求的工具。可能很多人都已经知道 Parallels Desktop 是「虚拟机」&#xff0c;但 CrossOver 其实并不是「虚拟机」。这两款软件有相同的作用&#xff0c;但由于实现原理的不同&#xff0c;两者也有…

系统提示我未定义与 ‘double‘ 类型的输入参数相对应的函数 ‘finverse‘,如何解决?

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

TCP粘包解决方法

一. 产生原因及解决方法 产生原因&#xff1a;TCP是面向连接、基于字节流的协议&#xff0c;其无边界标记。当服务端处理速度比不其接收速度时&#xff0c;就很容易产生粘包现象。 解决方法&#xff1a;目前主要有两种解决方法&#xff0c;一个是在内容中添加分割标识&#xf…

人脸识别考勤系统

人脸识别考勤系统是一种利用生物识别技术进行自动身份验证的现代解决方案&#xff0c;它通过分析和比对人脸特征来进行员工的出勤记录。这种系统不仅提升了工作效率&#xff0c;还大大减少了人为错误和欺诈行为的可能性。 一、工作原理 人脸识别考勤系统的核心在于其生物识别…

管道支架安装

工程结构施工完毕后&#xff0c;系统管道安装完毕后的第一步任务就是管道支架的制作安装&#xff0c;作为对管道固定和承重作用至关重要的支、托、吊架&#xff0c;有些项目部在施工中却往往因为对它们的重要性认识不足&#xff0c;因存在侥幸心里或经验主义&#xff0c;导致支…

技术探索:利用Python库wxauto实现Windows微信客户端的全面自动化管理

项目地址&#xff1a;github-wxauto 点击即可访问 项目官网&#xff1a;wxauto 点击即可访问 &#x1f602;什么是wxauto? wxauto 是作者在2020年开发的一个基于 UIAutomation 的开源 Python 微信自动化库&#xff0c;最初只是一个简单的脚本&#xff0c;只能获取消息和发送…

掌握MySQL基础命令:数据更新操作详细操作(数据的增删改)

MySQL数据修改是指使用SQL语句&#xff08;如UPDATE、INSERT、DELETE&#xff09;对数据库表中的数据进行更改、添加或删除的操作&#xff0c;常见的操作包括更新表中的记录、插入新记录以及删除现有记录 。 一、数据插入 1插入完整的数据记录 2插入非完整的数据记录 3插入多…

macOS使用Karabiner-Elements解决罗技鼠标G304连击、单击变双击的故障

记录一下罗技鼠标G304单击变双击的软件解决过程和方案&#xff08;适用于macOS&#xff0c; 如果是Windows&#xff0c;使用AutoHotKey也有类似解决办法、方案&#xff0c;改日提供&#xff09;&#xff1a; 背景&#xff1a;通过罗技Logitech G HUB软件对罗技的游戏鼠标侧键b…

摄像机反求跟踪软件/插件 Mocha Pro 2024 v11.0.2 CE Win

AE/PR/OFX/达芬奇/AVX插件 | 摄像机反求跟踪软件Mocha Pro 2024 v11.0.2 CE Win-PR模板网 Mocha Pro 软件(插件)&#xff0c;用于平面运动跟踪、3D跟踪、动态观察、对象移除、图像稳定和PowerMesh有机扭曲跟踪等功能。整合了SynthEyes核心的3D跟踪算法&#xff0c;能够快速自动…

k8s-第四节-Service

Service Service 通过 label 关联对应的 PodServcie 生命周期不跟 Pod 绑定&#xff0c;不会因为 Pod 重创改变 IP提供了负载均衡功能&#xff0c;自动转发流量到不同 Pod可对集群外部提供访问端口集群内部可通过服务名字访问 创建 Service kubectl apply -f service.yamlkub…

003-基于Sklearn的机器学习入门:回归分析(上)

本节及后续章节将介绍机器学习中的几种经典回归算法&#xff0c;所选方法都在Sklearn库中聚类模块有具体实现。本节为上篇&#xff0c;将介绍基础的线性回归方法&#xff0c;包括线性回归、逻辑回归、多项式回归和岭回归等。 2.1 回归分析概述 回归&#xff08;Regression&…

11 - matlab m_map地学绘图工具基础函数 - 绘制航迹、椭圆、风向玫瑰图和特定的圆形区域的有关函数及其用法

11 - matlab m_map地学绘图工具基础函数 - 绘制航迹、椭圆、风向玫瑰图和特定的圆形区域的有关函数及其用法 0. 引言1. 关于m_track2. 关于m_range_ring3. 关于m_ellipse4. 关于m_windrose5. 结语 0. 引言 本篇介绍下m_map中绘制航迹图函数&#xff08;m_track&#xff09;、绘…

python 发布应用程序包

文章目录 发布python包toml配置文件构建发布python包 官方文档参考 将自己的python项目发布成源码包或者wheel二进制包,供其他开发者使用。 方式: 使用py工具; distutils,该工具的使用已过时;setuptools,常用方式;wheel,在setuptools的基础上添加了 bdist_wheel, …

【BUUCTF-PWN】4-ciscn_2019_n_1

参考&#xff1a;BUUCTF-ciscn_2019_n_1 - 纸鸢asahi - 博客园 (cnblogs.com) buuctf 刷题记录_PWN ciscn_2019_n_1 - MuRKuo - 博客园 (cnblogs.com) 从题海中入门&#xff08;四&#xff09;ciscn_2019_n_1 - FreeBuf网络安全行业门户 ciscn_2019_n_1 ——两种解法_0x4134800…

Generative Modeling by Estimating Gradients of the Data Distribution

Generative Modeling by Estimating Gradients of the Data Distribution 本文介绍宋飏提出的带噪声扰动的基于得分的生成模型。首先介绍基本的基于得分的生成模型的训练方法&#xff08;得分匹配&#xff09;和采样方法&#xff08;朗之万动力学&#xff09;。然后基于流形假…

信号量——Linux并发之魂

欢迎来到 破晓的历程的 博客 引言 今天&#xff0c;我们继续学习Linux线程本分&#xff0c;在Linux条件变量中&#xff0c;我们对条件变量的做了详细的说明&#xff0c;今天我们要利用条件变量来引出我们的另一个话题——信号量内容的学习。 1.复习条件变量 在上一期博客中&…

天润融通分析AI技术助力客户服务,实现满意度三倍增长

如今&#xff0c;客户体验越来越成为影响客户决策的核心要素。 对于企业来讲&#xff0c;客户在不同触点的每一次互动体验&#xff0c;都成为塑造品牌声誉的“Aha时刻”。但同时&#xff0c;随着社会的发展的加速&#xff0c;客户的需求也在日新月异&#xff0c;给企业带来挑战…

刷代码随想录有感(125):动态规划——最长公共子序列

题干&#xff1a; 代码&#xff1a; class Solution { public:int longestCommonSubsequence(string text1, string text2) {vector<vector<int>>dp(text1.size() 1, vector<int>(text2.size() 1, 0));for(int i 1; i < text1.size(); i){for(int j …

【SQL】已解决:SQL错误(15048): 数据兼容级别有效值为100、110或120

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决SQL错误(15048): 数据兼容级别有效值为100、110或120 在数据库开发和管理过程中&#xff0c;我们经常会遇到各种各样的错误。本文将详细分析SQL错误(15048)的背景、可能原因、…

langchain框架轻松实现本地RAG

一 什么是RAG? RAG&#xff08;Retrieval-Augmented Generation&#xff09;是一种结合了检索和生成模型的方法&#xff0c;主要用于解决序列到序列的任务&#xff0c;如问答、对话系统、文本摘要等。它的核心思想是通过从大量文档中检索相关信息&#xff0c;然后利用这些信息…