Vue动态表头数据

2024-08-28 05:04

本文主要是介绍Vue动态表头数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 动态表头与数据
    • 第一种数据处理与渲染
      • 1-1.数据格式
      • 1-2.数据处理
      • 1-3.数据渲染
      • 注:如果后端返回下列数据格式,则不需要reduce直接复制给bodyData和Header即可渲染成功。

动态表头与数据

本文主要解决场景:表头不固定、从后端数据中拿取表头并渲染到页面中。
在这里插入图片描述

第一种数据处理与渲染

1-1.数据格式

let data = {"header": ["单位名称","单位简称"],"rows": [{"row": ["公司1"],},{"row": ["公司2"]}]
}

其中headers则为表头数组,而rows则为表内容。有朋友会发现,这里的表内容并不是对象格式,所以这里我在下面又做了一些拼接和数据处理。

1-2.数据处理

获取到数据后,我需要对这些数据进行分别处理存储后才能使用。如下代码所示

const Header = ref([])
const bodyData = ref([])
const handleData = () =>{Header.value = data.headerbodyData.value = data.rows.reduce((acc,row,rowIndex)=>{if(rowIndex % Header.value.length === 0) {acc.push({});}const newRow = acc[acc.length - 1];const columnName = Header.value[rowIndex % Header.value.length];newRow[columnName] = row.row[0];return acc
},[])
}

这段代码使用 reduce 方法来处理 data.rows 数组,并根据 Header 的值构建新的数据结构。
Reduce 函数接收一个回调函数和初始值(这里是空数组 [])。
回调函数有三个参数:累计器 acc、当前元素 row 和当前索引 rowIndex
rowIndex 能被 Header 长度整除时(即开始新行时),向累计器 acc 中添加一个新的空对象。
获取最新的空对象,并将其赋值给 newRow
计算当前列名:通过 rowIndexHeader 长度取模得到。
填充数据:将 row.row[0] 的值以当前列名为键,存入 newRow
最终返回acc累计器。
表头获取到的数据示例:

["姓名","年龄"
]

列数据获取到的数据示例:

[{"姓名": "梨花","年龄": "18"}
]

1-3.数据渲染

 <el-table :data="bodyData" max-height="500" border><el-table-column v-for="(item, index) in Header" :key="index" :label="item" show-overflow-tooltipalign="center" :min-width="index === 0 ? '120' : ''" :fixed="index === 0"><template #default="scope"><span>{{ scope.row[item] }}</span></template></el-table-column>
</el-table>

在代码中,我们渲染的数据为bodyData,我们在colunm中我们循环遍历Header表头,并将label设置为item,最后我们在插槽中,获取根据表头名称来获取当前列下的每条数据的值。

注:如果后端返回下列数据格式,则不需要reduce直接复制给bodyData和Header即可渲染成功。

{"body": [{"name": "梨花","age": 18},{"name": "丽丽","age": 18}],"header": ["name","age"]
}

这篇关于Vue动态表头数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1113799

相关文章

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient