element el-table實(shí)現(xiàn)多級(jí)表頭的代碼
更新時(shí)間：2024年04月23日 10:35:11 作者：菜泡泡@
多級(jí)表頭的作用與優(yōu)勢,多級(jí)表頭能夠清晰地展示數(shù)據(jù)的層次結(jié)構(gòu),幫助我們更好地理解數(shù)據(jù)之間的關(guān)系,下面通過本文給大家介紹element el-table實(shí)現(xiàn)多級(jí)表頭的代碼,感興趣的朋友跟隨小編一起看看吧
效果圖：
<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,
// 表數(shù)據(jù)
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: '',
},
],
// 表頭數(shù)據(jù)
tableConfig: [
{
id: 1,
label: '3UG',
prop: '',
children: [
{
id: 11,
label: '顏色',
prop: 'colro3UG'
},
{
id: 12,
label: '數(shù)量',
prop: 'qty3UG'
}
]
},
{
id: 2,
label: '3UE',
prop: '',
children: [
{
id: 21,
label: '前',
prop: '',
children: [
{
id: 211,
label: '顏色',
prop: 'frontColro3UE'
},
{
id: 212,
label: '數(shù)量',
prop: 'frontQty3UE'
}
]
},
{
id: 22,
label: '后',
prop: '',
children: [
{
id: 221,
label: '是否沖孔',
prop: 'isPunching3UE'
},{
id: 222,
label: '顏色',
prop: 'afterColro3UE'
},{
id: 223,
label: '數(shù)量',
prop: 'afterQty3UE'
},
]
}
]
},
{
id: 3,
label: '3LN',
prop: '',
children: [
{
id: 31,
label: '前',
prop: '',
children: [
{
id: 311,
label: '顏色',
prop: 'frontColro3LN'
},
{
id: 312,
label: '數(shù)量',
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: '數(shù)量',
prop: 'after4DQty3LN'
}
]
},
{
id: 322,
label: '5D',
prop: '',
children: [
{
id: 3221,
label: '是否沖孔',
prop: 'isPunching5D',
},
{
id: 3222,
label: '顏色',
prop: 'after5DColro3LN'
},
{
id: 3223,
label: '數(shù)量',
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: '數(shù)量',
prop: 'frontSQty2ZY'
}
]
},
{
id: 412,
label: 'N版',
prop: '',
children: [
{
id: 4121,
label: '是否沖孔',
prop: 'isPunchingN',
},
{
id: 4122,
label: '顏色',
prop: 'frontNColro2ZY'
},
{
id: 4123,
label: '數(shù)量',
prop: 'frontNQty2ZY'
}
]
}
]
},
{
id: 42,
label: '后',
prop: '',
children: [
{
id: 421,
label: '顏色',
prop: 'afterColro2ZY'
},
{
id: 422,
label: '數(shù)量',
prop: 'afterQty2ZY'
}
]
}
]
}
]
}
},
created() {
this.getVehicheStockList()
},
methods: {
async getVehicheStockList(){
await getVehicheStockList().then((res)=>{
// 3UG
if(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);
})
}
// 3UE
if(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);
// }
// })
}
// 3LN
if(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 );
}
})
}
})
}
// 3LN
if(res.data['2ZY']){
const location0Array = [];
const location1Array = [];
res.data['2ZY'].forEach((obj)=>{
if (obj.location === "0") {
location0Array.push(obj);
location0Array.forEach((item,index)=>{
//S
if(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'){//N
this.$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: {
// 表格的數(shù)據(jù)
tableData: {
type: Array,
required: true
},
// 多級(jí)表頭的數(shù)據(jù)
tableHeader: {
type: Array,
required: true
},
// 表格的高度
height: {
type: String,
default: '900'
}
},
components: {
TableColumn
}
}
</script>
<style scoped>
</style>到此這篇關(guān)于element el-table寫多級(jí)表頭的文章就介紹到這了,更多相關(guān)element el-table多級(jí)表頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue的異步更新實(shí)現(xiàn)原理，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
前端vue3打印功能實(shí)現(xiàn)(多頁打印、不使用插件)
在Vue項(xiàng)目中實(shí)現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實(shí)現(xiàn)的全部過程,文中介紹的方法實(shí)現(xiàn)了多頁打印并且不使用插件,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue打包后的線上部署Apache、nginx全過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了vue自定義filters過濾器的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
vue結(jié)合leaflet實(shí)現(xiàn)熱力圖
本文主要介紹了vue實(shí)現(xiàn)熱力圖，結(jié)合leaflet.heat插件可以很容易的做出熱力圖，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue--Router動(dòng)態(tài)路由的用法示例詳解
這篇文章主要介紹了Vue--Router動(dòng)態(tài)路由的用法,很多時(shí)候，我們需要將給定匹配模式的路由映射到同一個(gè)組件，在?Vue?Router?中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來實(shí)現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動(dòng)態(tài)路由相關(guān)知識(shí)給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-08-08
vue + typescript + 極驗(yàn)登錄驗(yàn)證的實(shí)現(xiàn)方法
這篇文章主要介紹了vue + typescript + 極驗(yàn) 登錄驗(yàn)證的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家介紹了create?vite?實(shí)例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue富文本框（插入文本、圖片、視頻）的使用及問題小結(jié)
這篇文章主要介紹了vue富文本框（插入文本、圖片、視頻）的使用及問題小結(jié),需要的朋友可以參考下2018-08-08
vuejs如何清空表單數(shù)據(jù)、刪除對象中的空屬性公共方法
這篇文章主要介紹了vuejs如何清空表單數(shù)據(jù)、刪除對象中的空屬性公共方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03