element el-table写多级表头

server/2024/12/22 13:38:34/

效果图：

 

<template><div class="result-wrapper"><dynamic-table :table-data="tableData" :table-header="tableConfig" v-if="dynamicTableShow"></dynamic-table></div>
</template><script>
import {getVehicheStockList} from "@/api/tool/dataScreen";
import DynamicTable from './DynamicTable'
export default {components: {DynamicTable},data () {return {dynamicTableShow: true,// 表数据tableData: [{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},{colro3UG: '',qty3UG: '',frontColro3UE: '',frontQty3UE: '',isPunching3UE:'',afterColro3UE: '',afterQty3UE: '',frontColro3LN: '',frontQty3LN: '',isPunching4D:'',after4DColro3LN: '',after4DQty3LN: '',isPunching5D:'',after5DColro3LN: '',after5DQty3LN: '',isPunchingS:'',frontSColro2ZY: '',frontSQty2ZY: '',isPunchingN:'',frontNColro2ZY: '',frontNQty2ZY: '',afterColro2ZY: '',afterQty2ZY: '',},],// 表头数据tableConfig: [{id: 1,label: '3UG',prop: '',children: [{id: 11,label: '颜色',prop: 'colro3UG'},{id: 12,label: '数量',prop: 'qty3UG'}]},{id: 2,label: '3UE',prop: '',children: [{id: 21,label: '前',prop: '',children: [{id: 211,label: '颜色',prop: 'frontColro3UE'},{id: 212,label: '数量',prop: 'frontQty3UE'}]},{id: 22,label: '后',prop: '',children: [{id: 221,label: '是否冲孔',prop: 'isPunching3UE'},{id: 222,label: '颜色',prop: 'afterColro3UE'},{id: 223,label: '数量',prop: 'afterQty3UE'},]}]},{id: 3,label: '3LN',prop: '',children: [{id: 31,label: '前',prop: '',children: [{id: 311,label: '颜色',prop: 'frontColro3LN'},{id: 312,label: '数量',prop: 'frontQty3LN'}]},{id: 32,label: '后',prop: '',children: [{id: 321,label: '4D',prop: '',children: [{id: 3211,label: '是否冲孔',prop: 'isPunching4D',},{id: 3212,label: '颜色',prop: 'after4DColro3LN'},{id: 3213,label: '数量',prop: 'after4DQty3LN'}]},{id: 322,label: '5D',prop: '',children: [{id: 3221,label: '是否冲孔',prop: 'isPunching5D',},{id: 3222,label: '颜色',prop: 'after5DColro3LN'},{id: 3223,label: '数量',prop: 'after5DQty3LN'}]}]}]},{id: 4,label: '2ZY',prop: '',children: [{id: 41,label: '前',prop: '',children: [{id: 411,label: 'S版',prop: '',children: [{id: 1,label: '是否冲孔',prop: 'isPunchingS',},{id: 2,label: '颜色',prop: 'frontSColro2ZY'},{id: 3,label: '数量',prop: 'frontSQty2ZY'}]},{id: 412,label: 'N版',prop: '',children: [{id: 4121,label: '是否冲孔',prop: 'isPunchingN',},{id: 4122,label: '颜色',prop: 'frontNColro2ZY'},{id: 4123,label: '数量',prop: 'frontNQty2ZY'}]}]},{id: 42,label: '后',prop: '',children: [{id: 421,label: '颜色',prop: 'afterColro2ZY'},{id: 422,label: '数量',prop: 'afterQty2ZY'}]}]}]}},created() {this.getVehicheStockList()},methods: {async getVehicheStockList(){await getVehicheStockList().then((res)=>{// 3UGif(res.data['3UG']){res.data['3UG'].forEach((item0,index0)=>{// this.$set(this.tableData[index0],'colro3UG', item0.vehiche);this.$set(this.tableData[index0],'qty3UG', item0.qty);})}// 3UEif(res.data['3UE']){const location0Array = [];const location1Array = [];res.data['3UE'].forEach((obj)=>{if (obj.location === "0") {location0Array.push(obj);location0Array.forEach((item,index)=>{// this.$set(this.tableData[index],'frontColro3UE',item.vehiche);this.$set(this.tableData[index],'frontQty3UE', item.qty);})} else if (obj.location === "1") {location1Array.push(obj);location1Array.forEach((item,index)=>{this.$set(this.tableData[index],'isPunching3UE', item.isPunching=='0'?'否':'是');// this.$set(this.tableData[index],'afterColro3UE', item.vehiche);this.$set(this.tableData[index],'afterQty3UE' , item.qty);})}})// res.data['3UE'].forEach((item1,index1)=>{//   // 前//   if(item1.location=='0'){//     // this.$set(this.tableData[index1],'frontColro3UE',item1.vehiche);//     this.$set(this.tableData[index1],'frontQty3UE', item1.qty);//   }else if(item1.location=='1'){//后//     this.$set(this.tableData[index1],'isPunching3UE', item2.isPunching=='0'?'否':'是');//     // this.$set(this.tableData[index1],'afterColro3UE', item2.vehiche);//     this.$set(this.tableData[index1],'afterQty3UE' , item2.qty);//   }// })}// 3LNif(res.data['3LN']){const location0Array = [];const location1Array = [];res.data['3LN'].forEach((obj)=>{if (obj.location === "0") {location0Array.push(obj);location0Array.forEach((item,index)=>{// this.$set(this.tableData[index],'frontColro3LN',item.vehiche);this.$set(this.tableData[index],'frontQty3LN', item.qty);})} else if (obj.location === "1") {location1Array.push(obj);location1Array.forEach((item,index)=>{if(item.vehiche=='3LNH'){this.$set(this.tableData[index],'isPunching4D', item.isPunching=='0'?'否':'是');// this.$set(this.tableData[index],'after4DColro3LN', item.vehiche);this.$set(this.tableData[index],'after4DQty3LN' , item.qty);}else if(item.vehiche=='3LNQ'){this.$set(this.tableData[index],'isPunching5D', item.isPunching=='0'?'否':'是');// this.$set(this.tableData[index],'after4DColro3LN', item.vehiche);this.$set(this.tableData[index],'after4DQty3LN', item.qty );}})}})}// 3LNif(res.data['2ZY']){const location0Array = [];const location1Array = [];res.data['2ZY'].forEach((obj)=>{if (obj.location === "0") {location0Array.push(obj);location0Array.forEach((item,index)=>{//Sif(item.vehiche=='2ZYF'){this.$set(this.tableData[index],'isPunchingS', item.isPunching=='0'?'否':'是');// this.$set(this.tableData[index],'frontSColro2ZY', item.vehiche);this.$set(this.tableData[index],'frontSQty2ZY' , item.qty);}else if(item.vehiche=='2ZYQ'){//Nthis.$set(this.tableData[index],'isPunchingN', item.isPunching=='0'?'否':'是');// this.$set(this.tableData[index],'frontNColro2ZY', item.vehiche);this.$set(this.tableData[index],'frontNQty2ZY', item.qty );}})} else if (obj.location === "1") {location1Array.push(obj);location1Array.forEach((item,index)=>{// this.$set(this.tableData[index],'afterColro2ZY',item.vehiche);this.$set(this.tableData[index],'afterQty2ZY', item.qty);})}})// res.data['2ZY'].forEach((item3,index3)=>{//   // 前//   if(item3.location=='0'){//     //S//     if(item3.vehiche=='2ZYF'){//       this.$set(this.tableData[index3],'isPunchingS', item3.isPunching=='0'?'否':'是');//       // this.$set(this.tableData[index3],'frontSColro2ZY', item3.vehiche);//       this.$set(this.tableData[index3],'frontSQty2ZY' , item3.qty);//     }else if(item3.vehiche=='2ZYQ'){//N//       this.$set(this.tableData[index3],'isPunchingN', item3.isPunching=='0'?'否':'是');//       // this.$set(this.tableData[index3],'frontNColro2ZY', item3.vehiche);//       this.$set(this.tableData[index3],'frontNQty2ZY', item3.qty );//     }//   }else if(item3.location=='1'){ //后//     // this.$set(this.tableData[index3],'afterColro2ZY',item3.vehiche);//     this.$set(this.tableData[index3],'afterQty2ZY', item3.qty);//   }// })}})},}
}
</script><style scoped lang="scss">
.policy-wrapper{margin-top: 10px;
}
.result-wrapper{margin: 20px auto 0;
}
::v-deep .el-table .el-table__header-wrapper .el-table__header tr th, .el-table .el-table__fixed-right .el-table__header tr th {background: transparent !important;color: #fff !important;font-size: 18px;font-weight: 600;
}
::v-deep .el-table .el-table__cell.is-center {text-align: center;color: #fff;
}
</style>

<template><el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label" align="center"><template v-for="item in coloumnHeader.children"><tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></tableColumn><el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop" align="center"></el-table-column></template></el-table-column>
</template><script>
export default {name: 'tableColumn',props: {coloumnHeader: {type: Object,required: true}}
}
</script><style scoped></style>

 

<template><el-table :data="tableData" border :height="height"><template v-for="item in tableHeader"><table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column><el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column></template></el-table>
</template><script>
import TableColumn from './TableColumn.vue'
export default {props: {// 表格的数据tableData: {type: Array,required: true},// 多级表头的数据tableHeader: {type: Array,required: true},// 表格的高度height: {type: String,default: '900'}},components: {TableColumn}
}
</script><style scoped></style>

 


http://www.ppmy.cn/server/9717.html

相关文章

【弱监督语义分割】DuPL：双学生鲁棒性弱监督语义分割

【弱监督语义分割】DuPL：双学生鲁棒性弱监督语义分割

DuPL: Dual Student with Trustworthy Progressive Learning for Robust Weakly Supervised Semantic Segmentation CVPR 2024 摘要&#xff1a; 与繁琐的多阶段相比&#xff0c;带有图像级标签的单阶段弱监督语义分割&#xff08;WSSS&#xff09;因其简化性而受到越来越多的…
阅读更多...
oracle insert操作分批量提交

oracle insert操作分批量提交

对临时表做insert插入时没有做批量提交&#xff0c;可能会导致undo表空间撑爆&#xff0c;修改脚本对插数进行2万一次的批量提交&#xff0c;并且修改索引和同义词创建时间在插数操作结束后。 原语句&#xff1a; insert into 目标表 select * from 源表;改为2w次一提交&…
阅读更多...
element-ui设置弹窗等级最高

element-ui设置弹窗等级最高

通过参数:appendToBody"true"设置弹窗等级最高 主要是 :appendToBody“true”&#xff0c;其他参数可根据自己需求配置 <el-dialog :title"title" :visible.sync"isShow" top"5vh" :appendToBody"true"><el-image…
阅读更多...
量子城域网系列（六）：关于量子信道

量子城域网系列（六）：关于量子信道

下图是“墨子号”卫星与兴隆地面站量子密钥分发的实验现场图&#xff0c;是不是很酷。星地高速量子密钥分发是“墨子号”量子卫星的科学目标之一。量子密钥分发实验采用卫星发射量子信号&#xff0c;地面接收的方式&#xff0c;“墨子号”量子卫星过境时&#xff0c;与河北兴隆…
阅读更多...
牛客Linux高并发服务器开发学习第三天

牛客Linux高并发服务器开发学习第三天

静态库的使用(libxxx.a) 将lession04的文件复制到lession05中 lib里面一般放库文件 src里面放源文件。 将.c文件转换成可执行程序 gcc main.c -o app main.c当前目录下没有head.h gcc main.c -o app -I ./include 利用-I 和head所在的文件夹&#xff0c;找到head。 main.c…
阅读更多...
Mysql基础（二）数据类型和约束

Mysql基础（二）数据类型和约束

一 数据类型 讲解主要的数据类型,不面面俱到,后续遇到具体问题再查询补充扩展&#xff1a; 知识点的深度和广度以工作为导向 ① int float M : 表示显示宽度&#xff0c;M的取值范围是(0, 255)例如: int(5),当数据宽度小于5位的时候在数字前面需要用字符填满宽度说明&…
阅读更多...
【从浅学到熟知Linux】进程间通信之匿名管道方式（进程间通信方式汇总、匿名管道的创建、匿名管道实现进程池详解）

【从浅学到熟知Linux】进程间通信之匿名管道方式（进程间通信方式汇总、匿名管道的创建、匿名管道实现进程池详解）

&#x1f3e0;关于专栏&#xff1a;Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 进程间通信介绍如何实现进程间通信进程间通信分类 管道通信方式什么是管道匿名管道pipe匿名管道读写规则管…
阅读更多...
实验2 NFS部署和配置

实验2 NFS部署和配置

一、实训目的 1.了解NFS基本概念 2.实现NFS的配置和部署 二、实训准备 1.准备一台能够安装OpenStack的实验用计算机&#xff0c;建议使用VMware虚拟机。 2.该计算机应安装CentOS 7&#xff0c;建议采用CentOS 7.8版本。 3.准备两台虚拟机机&#xff08;客户机和服务器机&…
阅读更多...
最新文章

Copyright @ 2022~2023