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 MySQL如何通过Binlog获取变更记录恢复数据

《PythonMySQL如何通过Binlog获取变更记录恢复数据》本文介绍了如何使用Python和pymysqlreplication库通过MySQL的二进制日志(Binlog)获取数据库的变更记录... 目录python mysql通过Binlog获取变更记录恢复数据1.安装pymysqlreplicat

Linux使用dd命令来复制和转换数据的操作方法

《Linux使用dd命令来复制和转换数据的操作方法》Linux中的dd命令是一个功能强大的数据复制和转换实用程序,它以较低级别运行,通常用于创建可启动的USB驱动器、克隆磁盘和生成随机数据等任务,本文... 目录简介功能和能力语法常用选项示例用法基础用法创建可启动www.chinasem.cn的 USB 驱动

Oracle数据库使用 listagg去重删除重复数据的方法汇总

《Oracle数据库使用listagg去重删除重复数据的方法汇总》文章介绍了在Oracle数据库中使用LISTAGG和XMLAGG函数进行字符串聚合并去重的方法,包括去重聚合、使用XML解析和CLO... 目录案例表第一种:使用wm_concat() + distinct去重聚合第二种:使用listagg,

Python实现将实体类列表数据导出到Excel文件

《Python实现将实体类列表数据导出到Excel文件》在数据处理和报告生成中,将实体类的列表数据导出到Excel文件是一项常见任务,Python提供了多种库来实现这一目标,下面就来跟随小编一起学习一... 目录一、环境准备二、定义实体类三、创建实体类列表四、将实体类列表转换为DataFrame五、导出Da

Python实现数据清洗的18种方法

《Python实现数据清洗的18种方法》本文主要介绍了Python实现数据清洗的18种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录1. 去除字符串两边空格2. 转换数据类型3. 大小写转换4. 移除列表中的重复元素5. 快速统

Python数据处理之导入导出Excel数据方式

《Python数据处理之导入导出Excel数据方式》Python是Excel数据处理的绝佳工具,通过Pandas和Openpyxl等库可以实现数据的导入、导出和自动化处理,从基础的数据读取和清洗到复杂... 目录python导入导出Excel数据开启数据之旅:为什么Python是Excel数据处理的最佳拍档

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

在Pandas中进行数据重命名的方法示例

《在Pandas中进行数据重命名的方法示例》Pandas作为Python中最流行的数据处理库,提供了强大的数据操作功能,其中数据重命名是常见且基础的操作之一,本文将通过简洁明了的讲解和丰富的代码示例,... 目录一、引言二、Pandas rename方法简介三、列名重命名3.1 使用字典进行列名重命名3.编

Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南

《Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南》在日常数据处理工作中,我们经常需要将不同Excel文档中的数据整合到一个新的DataFrame中,以便进行进一步... 目录一、准备工作二、读取Excel文件三、数据叠加四、处理重复数据(可选)五、保存新DataFram