element 普通表格行列转换（行列转换系列1）

因为用户的使用习惯、最近小白新完成的一个系统，里面使用的element的表格基本都是行列的表格，因此就想着整理一下，其中包括了，后端应该给的数组格式，以及前端如何渲染
这就是渲染后的样式

首先在elementui中 label 的值会被编译成表头名字，数组是按列逐个渲染，因此后端传过来的数组格式为一个大数组里面有多个小数组，第一个数组为表头名称，其余数组为每行的数据值

Data=[
['产品产量（吨）\时间','2022-04-11','2022-04-12','2022-04-13','2022-04-14'],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0]
]

当接收到后端穿的数组后进行处理，把表头数组单拿出来赋值为tableHead ，yieldData 即为数组行数据

 getApi().then(res => {if (res.status === 200) {this.tableHead = res.data[0]this.yieldData = res.datathis.yieldData.shift()}})

有了以上数据，则可以渲染数组，表头循环渲染，index 从0 开始，数据按列渲染

<el-table :data="yieldData" style="width: 100%"  height="100%"><el-table-column :label="item"  width="227"  v-for="(item, index) in tableHead"  :key="index"><template scope="scope">{{ scope.row[index] }}</template></el-table-column>
</el-table>

至此，element 表格行列转换就结束了，我们下篇文章中继续写element的树形表格行列转换，拜拜ヾ(•ω•`)o

element 普通表格行列转换（行列转换系列1）相关推荐

element 树形表格行列转换（行列转换系列2）
我们上篇文章写的是关于element普通表格的行列转换,下面我们开始写element树形表格的行列转换实现效果: 首先:我们通过element的官方文档中可以看出.当row 字段中包含childre ...
vue-element表格Day.js时间转换时间戳
这里写自定义目录标题 vue-element表格Day.js时间转换时间戳具体内容 vue-element表格Day.js时间转换时间戳记录一下修改时间的方式. 具体内容用的vue-elemen ...
html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧因为要做个网站, ...
python里怎么转置行列_Numbers怎样转置行列 Numbers行列转置图文教程
Numbers怎样转置行列 Numbers行列转置图文教程发表时间:2018-10-04 来源:必杀器整理软件安装:装机软件关于电脑装机必须的软件,比如windows office系列办公软件. ...
python图片保存jpg、show变成bmp_Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中...
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中我就废话不多说了,直接上代码吧! import Image from datetime import datetime impor ...
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换案例代码效果图元素变形原点 3D转换 3D转换--案例案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
element更改表格表头、行、指定单元格样式
element更改表格表头.行.指定单元格样式更改表格的样式使用header-cell-style属性,可为函数或对象函数写法  <el-table ...
vb.net 同时给多个属性赋值_Python尚学堂高淇|1721时间表示unix时间点毫秒微秒time模块浮点数自动转换强制转换增强赋值运算符...
017浮点数-自动转换-强制转换-增强赋值运算符浮点数称为float用a*b^10形式表示的科学计数法,比如:3.14,314E-2或者314e-2这些数字在内存当中也是按照科学计数法存储. > ...
element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...

element 普通表格行列转换（行列转换系列1）

element 普通表格行列转换（行列转换系列1）相关推荐

最新文章

热门文章