vue antdesgin table 动态表头动态数据示例

news2025/1/18 16:59:26

以下是一个基于 Vue 和 Ant Design Vue 的示例,可以动态生成表格的表头和数据:


<template>
  <div>
    <a-button @click="addColumn">添加列</a-button>
    <a-table :columns="columns" :dataSource="dataSource"></a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        }
      ],
      dataSource: [
        {
          name: '张三',
          age: 25
        },
        {
          name: '李四',
          age: 28
        }
      ]
    }
  },
  methods: {
    addColumn() {
      const newColumn = {
        title: `列 ${this.columns.length + 1}`, // 动态生成列名
        dataIndex: `col_${this.columns.length + 1}`, // 动态生成列的数据键名
        key: `col_${this.columns.length + 1}`
      }
      this.columns.push(newColumn)
      // 随机生成一条数据,对应新增的列
      const newData = {
        name: `用户 ${this.dataSource.length + 1}`,
        age: Math.floor(Math.random() * 20) + 20,
        [`col_${this.columns.length}`]: Math.floor(Math.random() * 100) + 1 // 对应新增的列的值
      }
      this.dataSource.push(newData)
    }
  }
}
</script>

这个示例中,通过 addColumn 方法动态添加列,每次添加时生成一个新的列名和列数据键名,并把新列添加到表头中。同时,随机生成一条新数据,对应新增的列的值。通过这种方式实现了动态表头和动态数据。

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

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

相关文章

2024年全国一高考数学压轴题

(3) 证明: 显然, 等差数列 { a 1 , . . . , a 4 n 2 } \{a_{1},...,a_{4n2}\} {a1​,...,a4n2​} 是 ( i , j ) (i, j) (i,j)-可分的等价于等差数列 { 1 , . . . , 4 n 2 } \{1,...,4n2\} {1,...,4n2} 是 ( i , j ) (i,j) (i,j)-可分的. 前推后显然, 我们考虑后推前, 在去…

U盘文件系统结构损坏的应对与预防

在数字化时代&#xff0c;U盘作为便携式存储设备&#xff0c;其重要性不言而喻。然而&#xff0c;当U盘文件系统结构损坏时&#xff0c;我们可能会面临数据丢失的风险。本文将深入探讨U盘文件系统结构损坏的问题&#xff0c;分析其产生的原因&#xff0c;并给出相应的数据恢复方…

JMS VS AMQP

JMS&#xff08;Java Message Service&#xff09;是一个为Java平台设计的API&#xff0c;主要针对Java开发者提供了一套用于企业级消息服务的标准接口。而AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;是一个应用层协议&#xff0c;它提供了一个开放的、标准…

如何维护Mac系统 苹果电脑怎么维护保养 MacBook日常保养

你的Mac就像一辆豪华跑车&#xff0c;不仅外观时尚&#xff0c;性能也强劲。但即使是最顶级的跑车&#xff0c;如果不定期保养&#xff0c;也会渐渐失去光彩。维护Mac系统其实并不复杂&#xff0c;只需简单的日常关怀&#xff0c;就可以让你的电脑保持最佳状态。下面&#xff0…

姿态估计_超简易demo

// 所以所谓姿态估计到底怎么实现&#xff1f; // paper核心代码有点难找&#xff0c;所以先看个简单实现感受一下 Mediapipe Mediapipe是主要用于构建多模式音频&#xff0c;视频或任何时间序列数据的框架。借助MediaPipe框架&#xff0c;可以构建令人印象深刻的ML管道&…

【无标题】2024.6.7

2024.6.7 【高考咯&#xff01;&#xff01;&#xff01;学长们加油啊&#xff01;&#xff01;&#xff01;】 Friday 五月初二 A. 双色球 【题目描述】 机房来了新一届的学弟学妹&#xff0c;邪恶的chenzeyu97发现一位学弟与他同名&#xff0c;于是他当起了善良的学长233 “…

【Text2SQL 论文】PET-SQL:用 Cross-Consistency 的 prompt 增强的两阶段 Text2SQL 框架

论文&#xff1a;PET-SQL: A Prompt-enhanced Two-stage Text-to-SQL Framework with Cross-consistency ⭐⭐⭐ arXiv:2403.09732&#xff0c;商汤 & 北大 Code&#xff1a;GitHub 一、论文速读 论文一开始提出了以往 prompt-based 的 Text2SQL 方法的一些缺点&#xff1…

JVM学习-监控工具(三)

jconsole 从Java5开始&#xff0c;在JDK中自带的java监控和管理控制台用于对JVM中内存、线程、和类等的监控&#xff0c;是一个基本JMX(java management extendsions)的GUI性能监控工具 三种连接方式 Local&#xff1a;使用JConsole连接是一个正在本地系统运行的JVM&#xf…

Python通过数据验证功能在Excel文件中创建下拉列表

Excel表格的灵活性和功能性深受各行各业人士的喜爱。在Excel表格中&#xff0c;下拉列表功能是提升数据录入效率与准确性的一个重要利器&#xff0c;能够为用户提供预设的选择项&#xff0c;限制输入范围&#xff0c;避免手动输入错误&#xff0c;还能够简化数据录入过程&#…

命令行打包最简单的android项目从零开始到最终apk文件

准备好需要的工具 AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 jdk的链接我就不发出来,自己选择,我接下来用的是8版本的jdk和android10的sdk sdk的安装和环境变量的配置 sdk tool压缩包打开后是这样子,打开sdk mana…

nodeJs项目完结

文章目录 项目总结对象.addEventListener(事件, 函数)事件类型&#xff1a; 本地存储的方式cookielocalStoragesessionStorage 客户端获取与服务端获取服务端渲染客户端渲染 POST&GETfor of & for InPromise的方法1. Promise.resolve2. Promise.reject3. Promise.final…

阿里云活动推荐:AI 应用 DevOps 新体验

活动简介 阿里云新活动&#xff0c;体验阿里云的云效应用交付平台。体验了下&#xff0c;总体感觉还不错。平台把常规的开发过程封装成了模板&#xff0c;部署发布基本都是一键式操作&#xff0c;并且对自定义支持的比较好。 如果考虑将发布和部署搬到云上&#xff0c;可以玩一…

算法人生(21):从“React框架”看“情绪管理”

说起React框架&#xff0c;我们知道它是一种由Facebook开发和维护的开源JavaScript库&#xff0c;主要用于构建用户界面&#xff0c;特别是单页应用程序&#xff08;SPA&#xff09;。React框架围绕组件化&#xff0c;即把用户界面拆分为可复用的独立组件&#xff0c;每个组件负…

【进程调度的基本过程】初步认识进程和线程的区别与联系:计算机是如何工作的

​ &#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【Java】登神长阶 史诗般的Java成神之路 &#x1f43a;一.冯诺依曼体系结构 认识计算机的祖师爷 -- 冯诺依曼 冯诺依曼&#xff08;John von Neumann&#xff0c;1903年12⽉28⽇-1957年2⽉8⽇&…

Linux:动态库和静态库的编译与使用

目录 1.前言 2.静态链接库 3.静态链接库生成步骤 4.静态链接库的使用 5.动态链接库 6.动态链接库生成步骤 7.动态链接库的使用 8.动态链接库无法加载 9.解决动态链接库无法加载问题 前言 在《MinGW&#xff1a;从入门到链接库》博客中简单介绍了如何编译动态链接库和静态链接库…

快速安装Windows和Ubuntu双系统

一、参考资料 用UltraISO制作Ubuntu16.04 U盘启动盘 DiskPart Command-Line Options 二、相关介绍 1. MBR和GPT分区模式 MBR分区模式 MBR最大仅支持2TB磁盘&#xff0c;超过2TB不可识别。 MBR&#xff08;Master Boot Record&#xff09;&#xff0c;即硬盘的主引导记录分…

统计信号处理基础 习题解答10-8

题目 一个随机变量具有PDF 。希望在没有任何可用数据的情况下估计的一个现实。为此提出了使最小的MMSE估计量&#xff0c;其中期望仅是对求的。证明MMSE估计量为。将你的结果应用到例10.1&#xff0c;当把数据考虑进去时&#xff0c;证明最小贝叶斯MSE是减少的。 解答 在贝叶…

python -- series和 DataFrame增删改数据

学习目标 知道df添加新列的操作 知道insert函数插入列数据 知道drop函数删除df的行或列数据 知道drop_duplicates函数对df或series进行数据去重 知道unique函数对series进行数据去重 知道apply函数的使用方法 1 DataFrame添加列 注意:本文用到的数据集在文章顶部 1.1 直…

Servlet基础(续集)

Servlet原理 Servlet是由Web服务器调用&#xff0c;Web服务器在收到浏览器请求之后&#xff0c;会&#xff1a; Mapping问题 一个Servlet可以指定一个映射路径 <servlet-mapping><servlet-name>hello</servlet-name><url-pattern>/hello</url-pa…

物联网8大协议介绍及对比

一.物联网主流协议介绍 1.MQTT 协议 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;即消息队列遥测传输。 MQTT 协议最初是在 1999 年由 IBM 公司开发的&#xff0c;用于将石油管道上的传感器与卫星相连接。2014 年正式成为 OASIS 开放标准。 MQTT 使用…