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;欢迎大家关注&&收藏&&…

Kubernetes 部署简单的应用

Kubernetes 部署简单的应用 Kubernetes 是一个强大的容器编排平台&#xff0c;它可以帮助我们自动化应用程序的部署、扩展和管理。在本期文章中&#xff0c;我们将学习如何使用 Kubernetes 部署一个简单的应用程序。 1. 环境准备 确保你已经安装了 Kubernetes 集群&#xff…

【python模块】argparse

文章目录 argparse模块介绍基本用法add_argument() argparse模块介绍 argparse 模块是 Python 标准库中的一个用于编写用户友好的命令行接口&#xff08;CLI&#xff09;的模块。它允许程序定义它所需要的命令行参数&#xff0c;然后 argparse 会自动从 sys.argv 解析出那些参…

TCP粘包解决方法

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

人脸识别考勤系统

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

深入剖析Python中的Pandas库:通过实战案例全方位解读数据清洗与预处理艺术

引言 随着大数据时代的到来&#xff0c;数据的质量直接影响到最终分析结果的可靠性和有效性。在这个背景下&#xff0c;Python凭借其灵活强大且易于上手的特点&#xff0c;在全球范围内被广泛应用于数据科学领域。而在Python的数据处理生态中&#xff0c;Pandas库无疑是最耀眼…

高级策略:解读 SQL 中的复杂连接

了解基本连接 在深入研究复杂连接之前&#xff0c;让我们先回顾一下基本连接的基础知识。 INNER JOIN&#xff1a;根据指定的连接条件检索两个表中具有匹配值的记录。LEFT JOIN&#xff1a;从左表检索所有记录&#xff0c;并从右表中检索匹配的记录&#xff08;如果有&#x…

管道支架安装

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

NIO为什么会导致CPU100%?

1. Java IO 类型概览 BIO&#xff1a;阻塞I/O&#xff0c;每个连接一个线程&#xff0c;简单但遇到高并发时性能瓶颈明显。NIO&#xff1a;非阻塞I/O&#xff0c;JDK 1.4引入&#xff0c;一个线程处理多个IO操作&#xff0c;提高资源利用率和系统吞吐量。AIO&#xff1a;异步I…

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

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

kpatch Patch Author Guide

kpatch Patch Author Guide Because kpatch-build is relatively easy to use, it can be easy to assume that a successful patch module build means that the patch is safe to apply. But in fact that’s a very dangerous assumption. 由于 kpatch-build 比较容易使用…

精通Spring Cloud: Spring Cloud Config面试题详解及参考答案(3万字长文)

解释Spring Cloud Config的基本功能和它在微服务架构中的作用 Spring Cloud Config是一个用于集中管理和外部化配置的工具。其核心功能在于允许开发者将配置从代码中分离出来,放置于一个中央存储库中,从而简化了配置管理,提高了应用程序的可维护性和灵活性。在微服务架构中…

论文的3个创新点方向

1、数据分析创新 通过对现有数据的分析&#xff0c;发现新的模式或趋势&#xff0c;提出新的假设或理论的方法。随着大数据和人工智能技术的发展&#xff0c;数据分析在科学研究中也有很多的创新。 可以通过实验、调查、模拟、现场等方式收集相关数据。数据的质量和数量是数据…

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

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

探讨SpringMVC的工作原理

SpringMVC是Spring框架的一部分&#xff0c;是用于构建Web应用程序的一个模块。SpringMVC遵循Model-View-Controller&#xff08;MVC&#xff09;设计模式&#xff0c;帮助开发者将应用程序的业务逻辑、控制逻辑和表示层分离。以下是SpringMVC的工作原理及其核心组件的详细介绍…

Oracle数据库导入导出详解

在数据库管理和维护过程中&#xff0c;数据的导入与导出是常见的需求&#xff0c;特别是在数据迁移、备份或数据分析等场景下尤为重要。Oracle数据库作为企业级的数据库管理系统&#xff0c;提供了强大的数据导入导出工具。本文将详细介绍Oracle数据库中数据导入和导出的常用方…

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…