table数据转换算法

最新推荐文章于 2024-01-28 14:31:23 发布
最新推荐文章于 2024-01-28 14:31:23 发布
阅读量461 收藏
点赞数 1
分类专栏： 编程算法思想 前端 文章标签： 算法 vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asd0356/article/details/115055771
版权

文章目录

前言

我们有如下的一组原始数据，现在我们需要在vue里使用原生table标签将其展示。

 data: [
                    {
                        paraValue: [
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                            { yaoqui: "特殊要求" },
                            { options: "可选项" },
                        ],
                        paradetailValue: [
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { options: "国标、非标协议" },
                            { yaoqui: "可选项" },
                        ],
                    },
                    {
                        paraValue: [
                            { yaoqui: "特殊要求" },
                            { options: "可选项" },
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                        ],
                        paradetailValue: [
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { yaoqui: "可选项" },
                            { options: "国标、非标协议" },

                        ],
                    },
                    {
                        paraValue: [
                            { options: "可选项" },
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                            { yaoqui: "特殊要求" },
                        ],
                        paradetailValue: [
                            { yaoqui: "可选项" },
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { options: "国标、非标协议" },
                        ],
                    },
                ]

构造dom元素

第一步我们需要构建dom元素，观察数据发现，最外层数组里的每个元素都包含两部分，一部分是th数据另一部分是td数据，所以不难写出下列的构建代码：

<div id="myapp">
        <table>
            <tr v-for="(item, index) in data" :key="index">
                <th v-if="index === 0" v-for="head in item.paraValue">
                    {{Object.values(head)[0]}}
                </th>
                <td v-if="index !== 0" v-for="detail in item.paradetailValue">
                    {{Object.values(detail)[0]}}
                </td>
            </tr>
        </table>
    </div>

完整的可运行代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
    <div id="myapp">
        <table>
            <tr v-for="(item, index) in data" :key="index">
                <th v-if="index === 0" v-for="head in item.paraValue">
                    {{Object.values(head)[0]}}
                </th>
                <td v-if="index !== 0" v-for="detail in item.paradetailValue">
                    {{Object.values(detail)[0]}}
                </td>
            </tr>
        </table>
    </div>
    <script>
        var my = new Vue({
            el: "#myapp",
            data: {
                data: [
                    {
                        paraValue: [
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                            { yaoqui: "特殊要求" },
                            { options: "可选项" },
                        ],
                        paradetailValue: [
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { options: "国标、非标协议" },
                            { yaoqui: "可选项" },
                        ],
                    },
                    {
                        paraValue: [
                            { yaoqui: "特殊要求" },
                            { options: "可选项" },
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                        ],
                        paradetailValue: [
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { yaoqui: "可选项" },
                            { options: "国标、非标协议" },

                        ],
                    },
                    {
                        paraValue: [
                            { options: "可选项" },
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                            { yaoqui: "特殊要求" },
                        ],
                        paradetailValue: [
                            { yaoqui: "可选项" },
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { options: "国标、非标协议" },
                        ],
                    },
                ]
            },
        })
    </script>
</body>

</html>

运行代码，结果如下：
在这里插入图片描述
不难发现虽然table表格展示出来，但是显示的th与td的数据却并非一一对应，所以接下来我们需要将其对应起来。

将原始数据进行排序

一个简单的思路就是，将每组元素里的paraValue和paradetailValue依据key进行相同算法的排序即可达到预期效果。
show you my code:

format(data) {
                    const resultValue = [];
                    for (let i = 0; i < data.length; i++) {
                        const paraValue = data[i].paraValue;
                        const paradetailValue = data[i].paradetailValue;
                        paraValue.sort((a, b) => Object.keys(a)[0].charCodeAt(0) - Object.keys(b)[0].charCodeAt(0));
                        paradetailValue.sort((a, b) => Object.keys(a)[0].charCodeAt(0) - Object.keys(b)[0].charCodeAt(0));
                        resultValue.push({
                            paraValue,
                            paradetailValue
                        });
                    }
                    return resultValue;
                }

由于key中的首字母都不一样，所以我这里按照首字母进行排序。（完整的算法应该是按照key的每个字母进行比较排序，因为key都是不一样的。）
虽然排序可以保证format之后的th和td的数据一一对应，但是如果我们想要将数据按照第一组数据的样式进行format，那么又该如何处理呢？

数据重组

显然此时排序已经不足以满足format需求了，因为我们很难讲一种数据形式转换成一种排序算法。这时候我们可以换个思路：根据第一组数据的形式，将重新造一组数据，使得其所有元素的数据形式都是一样的。
show you my code:

format2(data) {
                    const resultValue = [];
                    const target = [];
                    for (let i = 0; i < data.length; i++) {
                        const paraValue = data[i].paraValue;
                        const paradetailValue = data[i].paradetailValue;
                        const newParaValue = [];
                        const newParadetailValue = [];
                        if (i === 0) {
                            for (let j = 0; j < paraValue.length; j++) {
                                const key = Object.keys(paraValue[j])[0];
                                target.push(key);
                                const tail = paradetailValue.find(item => Object.keys(item)[0] === key);
                                newParaValue.push({ ...(paraValue[j]) });
                                newParadetailValue.push({ ...tail });
                            }
                        } else {
                            for (let j = 0; j < target.length; j++) {
                                const key = target[j];
                                const head = paraValue.find(item => Object.keys(item)[0] === key);
                                const tail = paradetailValue.find(item => Object.keys(item)[0] === key);
                                newParaValue.push({ ...head });
                                newParadetailValue.push({ ...tail });
                            }
                        }
                        resultValue.push({
                            paraValue: newParaValue,
                            paradetailValue: newParadetailValue,
                        });
                    }
                    return resultValue;
                }

这段代码应该不难理解，到此优化后的需求也完成了。

最终代码

优化后的完成代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
    <div id="myapp">
        <table>
            <tr v-for="(item, index) in data" :key="index">
                <th v-if="index === 0" v-for="head in item.paraValue">
                    {{Object.values(head)[0]}}
                </th>
                <td v-if="index !== 0" v-for="detail in item.paradetailValue">
                    {{Object.values(detail)[0]}}
                </td>
            </tr>
        </table>
    </div>
    <script>
        var my = new Vue({
            el: "#myapp",
            data: {
                data: [
                    {
                        paraValue: [
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                            { yaoqui: "特殊要求" },
                            { options: "可选项" },
                        ],
                        paradetailValue: [
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { options: "国标、非标协议" },
                            { yaoqui: "可选项" },
                        ],
                    },
                    {
                        paraValue: [
                            { yaoqui: "特殊要求" },
                            { options: "可选项" },
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                        ],
                        paradetailValue: [
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { yaoqui: "可选项" },
                            { options: "国标、非标协议" },

                        ],
                    },
                    {
                        paraValue: [
                            { options: "可选项" },
                            { canshu: "参数名称" },
                            { moren: "默认配置" },
                            { yaoqui: "特殊要求" },
                        ],
                        paradetailValue: [
                            { yaoqui: "可选项" },
                            { moren: "top" },
                            { canshu: "协议类型" },
                            { options: "国标、非标协议" },
                        ],
                    },
                ]
            },
            created() {
                this.data = this.format2(this.data);
            },
            methods: {
                format(data) {
                    const resultValue = [];
                    for (let i = 0; i < data.length; i++) {
                        const paraValue = data[i].paraValue;
                        const paradetailValue = data[i].paradetailValue;
                        paraValue.sort((a, b) => Object.keys(a)[0].charCodeAt(0) - Object.keys(b)[0].charCodeAt(0));
                        paradetailValue.sort((a, b) => Object.keys(a)[0].charCodeAt(0) - Object.keys(b)[0].charCodeAt(0));
                        resultValue.push({
                            paraValue,
                            paradetailValue
                        });
                    }
                    return resultValue;
                },
                format2(data) {
                    const resultValue = [];
                    const target = [];
                    for (let i = 0; i < data.length; i++) {
                        const paraValue = data[i].paraValue;
                        const paradetailValue = data[i].paradetailValue;
                        const newParaValue = [];
                        const newParadetailValue = [];
                        if (i === 0) {
                            for (let j = 0; j < paraValue.length; j++) {
                                const key = Object.keys(paraValue[j])[0];
                                target.push(key);
                                const tail = paradetailValue.find(item => Object.keys(item)[0] === key);
                                newParaValue.push({ ...(paraValue[j]) });
                                newParadetailValue.push({ ...tail });
                            }
                        } else {
                            for (let j = 0; j < target.length; j++) {
                                const key = target[j];
                                const head = paraValue.find(item => Object.keys(item)[0] === key);
                                const tail = paradetailValue.find(item => Object.keys(item)[0] === key);
                                newParaValue.push({ ...head });
                                newParadetailValue.push({ ...tail });
                            }
                        }
                        resultValue.push({
                            paraValue: newParaValue,
                            paradetailValue: newParadetailValue,
                        });
                    }
                    return resultValue;
                },
            }
        })
    </script>
</body>

</html>

运行代码，结果如下：
在这里插入图片描述

结语

本篇文章的代码主要是基于数据转换的算法，虽然代码难度不大，但是建议大家可以先自己思考着实现，毕竟很多时候也真的只是看起来简单而已。

奇喑
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
带你深入了解数据库三大范式
沁禹的博客
08-27 1661
深入了解数据库三大范式什么是范式?第一范式条件：必须不包含重复组的关系，即每一列都是不可拆分的原子项。第二范式条件：关系模式必须满足第一范式，并且所有非主属性都完全依赖于主码。注意，符合第二范式的关系模型可能还存在数据冗余、更新异常等问题。第三范式的条件：关系模型满足第二范式，所有非主属性对任何候选关键字都不存在传递依赖。即每个属性都跟主键有直接关系而不是间接关系，像：a-->b-->c。一般数据库设计中，一般要求达到3NF，第四第五较少涉及。 什么是范式? 当一个关系中的所有分类都是不可再分的
常用的数据转换方法
m0_46698362的博客
08-10 9904
1特征编码     模型输入的特征通常需要是数值型的，所以需要将非数值型特征转换为数值特征，如性别、职业、收入水平、国家、汽车使用品牌等。特征编码包括数字编码、One-Hot编码、哑变量编码方法。 1.1数字编码     一种简单的数字编码方法是从0开始赋予特征的每一个取值一个整数。对于等级型特征，按照特征取值从小到大进行整数编码可以保证编码后的数据保留原有的次序关系。     原特征 收
matlab将table转换为double
weixin_42612804的博客
02-15 9041
要将 MATLAB 中的 table 转换为 double，可以使用 table 中的 .Variables 属性，该属性返回一个包含 table 所有变量数据的数组。 以下是一个示例，将 table 转换为 double： % 创建一个table T = table([1; 2; 3], [4; 5; 6], 'VariableNames', {'Var1', 'Var2'}); % 使用 ....
Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法详解
pleaseprintf的博客
06-23 2037
在使用 Ant Design Vue 开发时，有时需要将 Table 表格中的数字类型字段转换为对应的文字表示，以提供更直观的数据展示。本文将详细介绍在 Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法，帮助您灵活地处理数据展示需求。Ant Design Vue 的 Table 组件提供了自定义列（custom column）的功能，可以使用 render 函数来自定义字段的展示方式。我们可以利用这个特性来将数字类型字段转换为对应的文字。
三种数据类型转换及运算符集合
世界和我们都不该止步于此
03-28 1430
目录 一.数据类型转换 1.字符型转换 2. 数字型转换 3.布尔类型转换 二.运算符 1.递增运算符 2.递减运算符 3.比较运算符 2.逻辑运算符 3.赋值运算符 三.运算符优先级排序 一.数据类型转换 1.字符型转换 数字型数据转换为字符型数据有三种方法： to String() 转换为字符串 var num = 100; console.log(num.toString()); String()强制转换为字符串 ...
多边形扫描转换算法.doc
05-06
多边形扫描转换算法 多边形扫描转换算法是一种计算机图形学中的算法，用于将多边形转换为扫描线形式，以便于图形的渲染和处理。该算法的实现主要涉及到几何计算、数据结构和算法设计等方面。 首先，多边形扫描转换...
数据压缩JPEG算法的C++实现，可以进行从bmp格式到JPEG格式的转换
12-06
3. 离散余弦变换（DCT）：对每个8x8块进行DCT，将空间域的数据转换到频率域。这一步会将高频细节信息（即图像的边缘和噪声）转换为较小的系数，而保留低频信息（图像的基本结构）。 4. 量化：为了进一步减少数据量...
ExcelToHtmlTable转换算法:将Excel转换成Html表格并展示(项目源码+详细注释+项目截图)
10-04
转换算法的难点在于，如何处理行列合并,将Excel的行列合并模型转换成Html表格的行列合并模型。 背景故事 因实际需要，需要将Excel展现在Web界面中。 最初，想在网上找开源的东东，结果没有1个是想要的。有的特别...
数据分析实战 - K-means算法-蛋白质消费特征分析
11-11
Z-Score标准化是一种常见的方法，它将数据转换成以均值为0，标准差为1的标准正态分布。 执行K-means算法的步骤如下： 1. 初始化：随机选择k个样本作为初始聚类中心。 2. 分配样本：计算每个样本到所有聚类中心的...
将table转换成div+css
01-14
能快速的将table标签转换成div+css，在网页运行时减少带宽，更迅速的出现网页。增强客户体验！
Matlab 的各种数据类型的转换
lazyboots107的博客
01-13 1990
各种数据类型转换（1）
数据转换：将数据转换为不同的格式
最新发布
禅与计算机程序设计艺术
01-28 813
1.背景介绍 1. 背景介绍 在现代信息化时代，数据是成为企业竞争力的关键因素之一。数据的质量和可用性直接影响企业的决策能力和运营效率。因此，数据转换成为了一项重要的技术。数据转换的目的是将数据从一个格式转换为另一个格式，以满足不同的应用需求。 数据转换的应用场景非常广泛，包括但不限于： 数据库迁移：将数据从一个数据库系统迁移到另一个数据库系统。 数据清洗：将数据从原始格式转换为有效的数...
数据类型转换三种方式
qq_40690077的博客
07-29 1万+
数据类型转换包括： 一、自动类型转换 自动类型转换需满足的的条件： ①.两种类型必须兼容 ②.目标类型大于源类型 例如： int a = 7; double b = a; 二、强制类型转换 强制类型转换需满足的的条件： 表示范围大的数据类型要转换为范围小的数据类型。 例如： double a = 7.5; int b = (int)a; 三、包装类 说明： 强制类型转换和自动类型装换适用于八种...
Lua table.sort()排序
iDaDi的博客
11-23 2501
知识点1.lua table.sort 知识点2.lua table转字符串
matlab中的常用的类型转换
热门推荐
weixin_43779943的博客
12-17 1万+
From Double double 转为cell：num2cell num2cell(A,1) 按列转，每一列转为一个cell num2cell(A,2) 按行转，每一行转为一个cell num2cell(A, [1,2]) 将第一维度和第二维度的元素合并在一起组成一个cell double转为char：num2str num2cell的维度对应 From Cell cell
不同数据类型的相互转换
LingXi__Y的博客
07-28 4883
不同数据类型的相互转换 首相强调一下那个关于各类型数值的长度以及取值范围的表格十分重要，必须附上：类型 关键字 长度（位） 取值范围 有符号字符型 【signed】char 8 -128–127 无符号字符型 unsigned char
Table列属性转换
chouguo1399的博客
09-29 184
//转复选框 KDCheckBox BIMUDF0001_CheckBox = new KDCheckBox(); BIMUDF0001_CheckBox.setName("BIMUDF0001_CheckBox"); KDTDefaultCellEditor kdtEntrys_BIMUDF...
html table 转json
Max's Note
01-19 5736
html table 转json max.bai 2018-01   最近django做接口平台，前端需要table转json格式，自己写了一个，记录一下   1. html table 设置 首先规范table格式 a. table一定要有thead th，tbody b. 每个th 要有name属性，name的值将用来做json里么的key值 c. td 中需要获得值得控件...
数据结构 查找算法的实现
06-01
其实现原理是先将数据集合中的元素通过哈希函数转换为哈希表中的索引，然后在哈希表中查找目标元素。代码示例如下： ```python def hash_search(data, target): hash_table = {} for i in range(len(data)): ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值