【Vue嵌套数据中,实现动态表头和内容】

news/2025/1/15 13:26:21/

el-table中,表头和内容是动态的。表头名称取数组对象tableData中的crb.name、dcpg.name等等。表头为空,不显示这一列。内容取的是数组对象tableData中的crb.count、dcpg.count等等。tableData = [ { crb: { name:‘矫正状态: 在矫(数里)’, count: 1, }, dcpg: { name:‘矫正状态’, count: 11111, } }, ]

<el-table :data="tableData" style="width: 100%"><el-table-columnv-for="(item, index) in listLabel":key="index":prop="item.prop":label="item.label"></el-table-column>
</el-table>
export default {data() {return {tableData: [{crb: { name: '姓名: ', count: 100 },dcpg: { name: '爱好', count: 200 },},{crb: { name: '姓名: ', count: 300 },dcpg: { name: '爱好', count: 400 },},// 更多数据...],listLabel: [],};},mounted() {this.generateTableHeader();},methods: {generateTableHeader() {const keys = ['crb', 'dcpg']; // 定义你想从每个对象中提取的键const seenKeys = new Set(); // 用于跟踪已经处理过的键this.listLabel = this.tableData.reduce((acc, item) => {keys.forEach((key) => {if (item[key] && item[key].name && !seenKeys.has(key)) {acc.push({ label: item[key].name, prop: key + '.count' });seenKeys.add(key); // 将处理过的键添加到集合中}});return acc;}, []);},},
};

http://www.ppmy.cn/news/1526430.html

相关文章

只有IP地址没有域名怎么实现HTTPS访问?

&#x1f510; 实现IP地址HTTPS访问 &#x1f310; 确认公网IP地址 公网IP&#xff1a;确保你拥有一个公网IP地址&#xff0c;或者内网映射公网&#xff0c;这是实现HTTPS访问的前提。 &#x1f4dd; 选择证书颁发机构&#xff08;CA&#xff09; 选择CA&#xff1a;选择一个…

Java多线程面试精讲:源于技术书籍的深度解读

写在前面 ⭐️在无数次的复习巩固中&#xff0c;我逐渐意识到一个问题&#xff1a;面对同样的面试题目&#xff0c;不同的资料来源往往给出了五花八门的解释&#xff0c;这不仅增加了学习的难度&#xff0c;还容易导致概念上的混淆。特别是当这些信息来自不同博主的文章或是视…

code eintegrity npm err sha512

当 npm install 出现报错的时候&#xff1a; 你应该这样去解决&#xff1a; 删除 package-lock.json 文件&#xff0c;重新执行 npm install。 问题出现的原因 EINTEGRITY 错误码表示在npm缓存中无法找到 指定sha512校验合的模块。 出现这个问题的原因是缓存不一致&…

加密与安全 _ 安全原则:任何客户端的东西都不可信任

文章目录 OverView客户端的计算不可信1. 初始错误示例2. 改进后的正确示例3. 更进一步的优化&#xff1a;使用简化的请求对象 客户端提交的参数需要校验初始错误示例改进后的正确示例方式一&#xff1a;手动校验参数方式二&#xff1a;使用 Spring Validation 进行参数校验 隐藏…

王者荣耀改重复名(java源码)

王者荣耀改重复名 项目简介 “王者荣耀改重复名”是一个基于 Spring Boot 的应用程序&#xff0c;用于生成王者荣耀游戏中的唯一名称。通过简单的接口和前端页面&#xff0c;用户可以输入旧名称并获得一个新的、不重复的名称。 功能特点 生成新名称&#xff1a;提供一个接口…

Spring Boot,在应用程序启动后执行某些 SQL 语句

在 Spring Boot 中&#xff0c;如果你想在应用程序启动后执行某些 SQL 语句&#xff0c;可以利用 spring.sql.init 属性来配置初始化脚本。这通常用于在应用启动时创建数据库表、索引、视图等&#xff0c;或者填充默认数据。data-locations 和 schema-locations 指定了 SQL 脚本…

Golang | Leetcode Golang题解之第409题最长回文串

题目&#xff1a; 题解&#xff1a; func longestPalindrome(s string) int {mp : map[byte]int{}for i : 0; i < len(s); i {mp[s[i]]}res : 0for _, v : range mp {if v&1 1 {res v - 1} else {res v}}if res<len(s) {res}return res }

软件工程测试

1. 软件测试概述 通俗地说&#xff0c;软件测试是为了发现错误而执行程序的过程。 软件测试&#xff1a;根据软件开发各阶段的规格说明和程序的内部结构而精心设计一批测试用例&#xff08;即输入数据及其预期的输出结果&#xff09;&#xff0c;并利用这些测试用例去运行程序…