vxe-table的序号一样

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

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

解决方法:

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

看代码

<template>
  <div>
    <el-button type="primary"
               @click="addRow">添加一行</el-button>
    <vxe-table border
               height="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 = null
      this.tableData.push(obj)
    }
  }
}
  </script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

理解MySQL核心技术:外键(Foreign Key)的设计与实现

在日常开发中&#xff0c;数据库是必不可少的部分&#xff0c;而MySQL作为最流行的关系型数据库之一&#xff0c;广泛应用于各类项目中。为了确保数据的完整性和一致性&#xff0c;外键&#xff08;Foreign Key&#xff09;无疑是一个重要的概念。在本篇文章中&#xff0c;我们…

认识100种电路之降压电路

在电子电路的世界里&#xff0c;降压电路扮演着至关重要的角色。 【为什么电路需要降压电路】 首先&#xff0c;我们要明白&#xff0c;不同的电子设备和元件往往需要特定的电压来正常工作。比如&#xff0c;某些芯片可能需要 5V 的电压&#xff0c;而我们提供的电源可能是 12…

zabbix报警机制,主动监控

zabbix思路流程 主动监控 默认zabbix使用的是被动监控&#xff0c;主被动监控都是针对被监控主机而言的。被动监控&#xff1a;Server向Agent发起请求&#xff0c;索取监控数据。此种模式常用主动监控&#xff1a;Agent向Server发起连接&#xff0c;向Server汇报 配置web2使用…

实验五 数据库完整性约束的实现与验证

题目 在实验四的基础上&#xff0c;重新创建以下三个表&#xff1a; 会员表&#xff1a;member(memno,memname,address,telephone,username,userpwd)&#xff0c;主码为memno&#xff0c;属性memname不能取空值 员工表&#xff1a;employee(empno,empname,depno,sex,telephone…

Go语言工程管理

本文内容为Go工程创建和配置开发及简单程序示例。 目录 工程管理 GOPATH 配置GOPATH GOROOT 新建系统变量 配置go工程 添加go path 简单的程序实现 程序代码 开始运行 运行结果 内容解析 总结 工程管理 GOPATH go语言的项目&#xff0c;需要有特定的目录结构进行…

ArmPiPro-环境变量

V0.0 2024-07-04 V0.1 加入开发环境和PI4关于ROS的环境变量的对比 1.我们可以用env | grep ROS来查看Pi4中的ROS环境变量 如下图所示&#xff0c;不理解的&#xff0c;抛给AI快速了解一下。 2.ArmPiPro安装的ROS是ROS1-melodic 3.在开发时&#xff0c;需要在笔记本电脑上开一…

visual studio远程调试

场景一&#xff08;被远程调试的电脑&#xff09; 确定系统位数 我这里是x64的 找到msvsmon.exe msvsmon.exe目录位置解释&#xff1a; “F:\App\VisualStudio\an\Common7\IDE\”是visual studio所在位置、 “Remote Debugger\”是固定位置、 “x64”是系统位数。 拼起来就是…

uni-app上传失败超出文件限制解决方法-分包处理-预加载

分包背景 当你的上传出现一下错误&#xff1a; Error: 系统错误&#xff0c;错误码&#xff1a;80051,source size 2089KB exceed max limit 2MB [20240703 10:53:06][wxbf93dfb6cb3eb8af] [1.06.2405010][win32-x64] 说明你主包太大需要处理了&#xff0c;一下两种方法可以…

【LeetCode:841. 钥匙和房间 + DFS】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

嵌入式Linux系统编程 — 6.4 信号集

目录​​​​​​​ 1 信号集概念 2 sigemptyset、sigfillset初始化信号集 3 sigaddset、sigdelset向信号集中添加/删除信号 4 sigismember函数测试信号是否在信号集中 1 信号集概念 在Linux系统中&#xff0c;信号集&#xff08;signal set&#xff09;用于表示一组信号…

001:开源交易系统开发实战开篇

本专栏采用融入【主力思维】的方法学&#xff0c;包含数据抓取、特征模型开发、历史验证回归测试、每日动态风险评估管理等技术&#xff0c;较大的增强股票投资胜率&#xff0c;让IT开发者拥有一套实用的属于自己思路的专用交易软件。 先简要介绍下系统运行的成果和项目架构&a…

java版本ERP管理系统源码 Spring Cloud ERP_ERP系统_erp软件_ERP管理系统

在当今数字化时代&#xff0c;企业对高效、稳定且易于扩展的管理系统的需求日益增长。为了满足这一需求&#xff0c;我们精心打造了一款基于Java技术的ERP&#xff08;Enterprise Resource Planning&#xff09;管理系统。该系统充分利用了Spring Cloud Alibaba、Spring Boot、…

基于Java中的SSM框架实现小型企业人事管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现小型企业人事管理系统演示 摘要 人才是企业发展的核心力量&#xff0c;所以人事管理是企业管理中一项重要的任务。传统的人事管理系统不仅效率慢而且极易出错&#xff0c;使管理者不能清楚的了解每一位员工的详细情况&#xff0c;对企业的发展形成了不…

ctfshow-web入门-命令执行(web119、web120、web121、web122)

目录 1、web119 2、web120 3、web121 4、web122 1、web119 采用 118 的 payload&#xff0c;回显 evil input&#xff0c;说明新增了过滤 单独测试一下&#xff0c;是 PATH 、BASH 被过滤了 在上一题的基础上&#xff0c;我们再介绍一个内置变量&#xff1a;$RANDOM 它会…

【日记】居然梦到了南通……(701 字)

正文 昨晚的睡眠质量很不好。做了一个很离谱的梦&#xff0c;噩梦。梦到我被一群南通给那什么了。当时直接给我吓醒了。我都不知道为什么会做这种诡异的梦。 昨晚那群孩子要去这个县里最繁华的广场跳舞。结果老师一声 “走&#xff01;” 给我都听懵了。那地方可不近啊。我们最…

化身成羊:关于羊的词群探析

在西方的神话故事中&#xff0c;像主神宙斯&#xff0c;或者基督教义中的上帝&#xff0c;通常都有化身成羊的形象。 那为什么会这样呢&#xff1f; 一、什么是神话(myth)&#xff1f; 神话&#xff0c;正式的用词是 mythology&#xff1a; mythology n.神话&#xff1b;神话…

专访ATFX首席战略官Drew Niv:以科技创新引领企业高速发展

在金融科技创新的浪潮中&#xff0c;人才是推动企业高速发展的核心驱动力&#xff0c;优质服务是引领企业急速前行的灯塔。作为差价合约领域的知名品牌&#xff0c;ATFX高度重视人才引进工作&#xff0c;秉持“聚天下英才而用之”的理念&#xff0c;在全球范围内广揽科技精英&a…

java版本工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统

工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管理的…

二氯二氰苯醌(DDQ)市场空间受限 行业需要寻求新的发展方向及机遇

二氯二氰苯醌&#xff08;DDQ&#xff09;市场空间受限 行业需要寻求新的发展方向及机遇 二氯二氰苯醌&#xff08;DDQ&#xff09;&#xff0c;学名2,3-二氯-5,6-二氰基苯醌&#xff0c;是一种亮黄色粉末状化合物&#xff0c;具有强氧化性。DDQ在化学合成中具有重要用途&#…

LInux安装nginx方法以及配置文件释义

Linux安装Nginx方法以及所遇见的坑 安装nginx注意细节1、安装所需要的依赖2、下载以及安装nginx3、所有命令执行完毕&#xff0c;启动nginx4、开通防火墙执行完以上所有命令&#xff0c;nginx安装以及启动步骤完成&#xff0c;满足基础访问&#xff0c;访问地址如下&#xff1a…