vue项目 element表格数据行转列数据互转

后台返回的格式一个人名里面带有这个人的所有信息，我们需要数据转化 ( 俗称行转列 )
这个平时可以用在时间日期上比较多，这个案例只是把这个写法记录下来

<template><div class="warp"><el-card><el-table :data="tableDataFirst" style="width: 100%" border><el-table-column prop="brand" label="姓名" align="center"> </el-table-column><el-table-column prop="weights" label="指标" align="center"> </el-table-column><el-table-column:label="item":prop="item"align="center"v-for="(item, i) in cloumnDataFirst":key="i"></el-table-column></el-table><div style="margin: 20px 0; width: 100%; height: 10px; background: skyblue"></div><el-table:data="tableDataSecond"style="width: 100%"border:span-method="tableSpanMethod"><el-table-column prop="brand" label="姓名" align="center"> </el-table-column><el-table-column prop="names" label="指标" align="center"> </el-table-column><el-table-column:label="item":prop="item"align="center"v-for="(item, i) in cloumnDataFirst":key="i"></el-table-column></el-table></el-card></div>
</template><script>
export default {data() {return {tableDataFirst: [],tableDataSecond: [],cloumnDataFirst: [],cloumnDataSecond: [],result: {张三: [{age: "30岁",height: "110",weight: "82kg",beautify: "高",},{age: "21岁",height: "114",weight: "86kg",beautify: "美",},{age: "22岁",height: "121",weight: "83kg",beautify: "重",},{age: "23岁",height: "125",weight: "84kg",beautify: "帅",},],李四: [{age: "30岁",height: "120",weight: "80kg",beautify: "美",},{age: "21岁",height: "123",weight: "81kg",beautify: "高",},{age: "22岁",height: "126",weight: "79kg",beautify: "重",},{age: "23岁",height: "130",weight: "84kg",beautify: "靓",},{age: "14岁",height: "125",weight: "83kg",beautify: "美",},],王五: [{age: "30岁",height: "130",weight: "79kg",beautify: "帅",},{age: "21岁",height: "136",weight: "82kg",beautify: "好",},{age: "22岁",height: "138",weight: "83kg",beautify: "聪",},{age: "23岁",height: "142",weight: "87kg",beautify: "美",},],赵六: [{age: "30岁",height: "140",weight: "76kg",beautify: "瘦",},{age: "21岁",height: "142",weight: "86kg",beautify: "胖",},{age: "22岁",height: "146",weight: "85kg",beautify: "瘦",},{age: "23岁",height: "152",weight: "89kg",beautify: "高",},],},};},mounted() {this.initFirst();this.initSecond();},methods: {tableSpanMethod({ row, columnIndex }) {if (columnIndex == 0) {const tempRow = row.spans || 0;return { rowspan: tempRow, colspan: tempRow > 0 ? 1 : 0 };}return { rowspan: 1, colspan: 1 };},initFirst() {let temp = {},heightList = {},list = [],result = this.result;for (let key in result) {temp = { brand: key, weights: "体重" }; // weights 表示指标这一列都是体重文字result[key].forEach((item) => {temp[item.age] = item.weight;if (!this.cloumnDataFirst.includes(item.age)) {this.cloumnDataFirst.push(item.age);}});list.push(temp);}this.cloumnDataFirst = this.cloumnDataFirst.sort();this.tableDataFirst = list;},initSecond() {let temp = {},temp1 = {},temp2 = {},list = [],result = this.result;for (let key in result) {// spans是只体重这个单元要占用2行// temp1 temp2 表示 属性 weight heighttemp = { brand: key };temp1 = { ...temp, names: "体重", spans: 2 };temp2 = { ...temp, names: "身高" };// result[key] 表示数组result[key].forEach((item) => {// item每一项属性temp1[item.age] = item.weight;temp2[item.age] = item.height;if (!this.cloumnDataSecond.includes(item.age)) {// 把 age属性push进去数组里this.cloumnDataSecond.push(item.age);}});list.push(temp1, temp2);}console.log("list", list);this.tableDataSecond = this.tableDataSecond.sort();this.tableDataSecond = list;},},
};
</script><style lang="scss" scoped>
.warp {padding-top: 20px;
}
</style>

vue项目 element表格数据行转列数据互转相关推荐

vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章首先安装各种工具: -- 安装 docxtemplater cnpm install docxtempla ...
android webservices 返回多行多列数据,NoahWeb实现表格多行多列
用NoahWeb的表现层指令可以在动态生成的页面中非常容易的实现多行多列的表格.在正式学习以前我们需要先来了解一下怎么用NoahWeb的表现层来做动态内容显示. 在NoahWeb设计器中新建或打开一项 ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
php html转成数组,PHP_php将HTML表格每行每列转为数组实现采集表格数据的方法，本文实例讲述了php将HTML表格每 - phpStudy...
php将HTML表格每行每列转为数组实现采集表格数据的方法本文实例讲述了php将HTML表格每行每列转为数组实现采集表格数据的方法.分享给大家供大家参考.具体如下: 下面的php代码可以将HTML表 ...
【Python数据分析】利用Python删除EXCEL表格中指定的列数据或行数据
如何利用Python删除EXCEL表格中指定的列数据?今天与大家一起分享一下DataFrame对象的drop()函数,drop()函数可根据标签删除EXCEL表格中的列数据或行数据,其语法格式如下: ...
python pandas库读取excel/csv中指定行或列数据详解
通过阅读表格,可以发现Pandas中提供了非常丰富的数据读写方法,下面这篇文章主要给大家介绍了关于python利用pandas库读取excel/csv中指定行或列数据的相关资料,需要的朋友可以参考下 ...
vue项目实现表格定时滚动
两种方法实现vue项目实现表格滚动 1.拖动元素实现 2. 改变数据实现 1.拖动元素实现原理:全部数据渲染出来,只展示规定的几条数据,配合css隐藏掉多余的部分,js通过定时器将需要拖动的元素向上 ...
怎样在表格中选出同一类_如何让excel表格中的几列数据相同的名称数据排列
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:如何让excel表格中的几列数据相同的名称数据排列在一行如下图回答:使用分类汇总分类字段为型号汇总项为所有日期汇总方式选择求和在左 ...
exce中让两列数据一一对应_EXCEL表格如何匹配两列数据一样-EXCEL让两个表格中的两列数据一一对应...
怎样把excel中两列有部分相同的数据进行匹配? 1.首先打开excel表格,可以看到有两列数据需要匹配,找出列B中在列A中没有的数据. 2.然后在C1单元格内输入函数公式:=IF(ISNA(VLOO ...

vue项目 element表格数据行转列数据互转

vue项目 element表格数据行转列数据互转相关推荐

最新文章

热门文章