element el-table實(shí)現(xiàn)多級表頭的代碼
更新時(shí)間：2024年04月23日 10:35:11 作者：菜泡泡@
多級表頭的作用與優(yōu)勢,多級表頭能夠清晰地展示數(shù)據(jù)的層次結(jié)構(gòu),幫助我們更好地理解數(shù)據(jù)之間的關(guān)系,下面通過本文給大家介紹element el-table實(shí)現(xiàn)多級表頭的代碼,感興趣的朋友跟隨小編一起看看吧
效果圖：
<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
},
// 多級表頭的數(shù)據(jù)
tableHeader: {
type: Array,
required: true
},
// 表格的高度
height: {
type: String,
default: '900'
}
},
components: {
TableColumn
}
}
</script>
<style scoped>
</style>到此這篇關(guān)于element el-table寫多級表頭的文章就介紹到這了,更多相關(guān)element el-table多級表頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Avue自定義formslot調(diào)用rules自定義規(guī)則方式
在Avue框架中,使用formslot自定義表格列時(shí)可能會遇到無法調(diào)用Avue的自定義校驗(yàn)規(guī)則的問題,這通常發(fā)生在嘗試通過formslot自定義設(shè)置列的場景中,解決這一問題的一個(gè)有效方法是將自定義列與Avue的校驗(yàn)規(guī)則通過特定方式連接起來2024-10-10
在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)
這篇文章主要介紹了在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue Router動態(tài)路由經(jīng)典問題next({?...to,?replace:?true?
這篇文章主要介紹了Vue Router動態(tài)路由經(jīng)典問題next({?...to,replace:true})解決方案的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue Router動態(tài)路由具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2026-03-03
詳解vue-cli 快速搭建單頁應(yīng)用之遇到的問題及解決辦法
這篇文章主要介紹了詳解vue-cli 快速搭建單頁應(yīng)用之遇到的問題及解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法
本文主要介紹了vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue3.0如何在全局掛載對象和方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
關(guān)于vuex的學(xué)習(xí)實(shí)踐筆記
vuex是vue的狀態(tài)管理模式，主要可以解決父子組件嵌套層數(shù)較多，或者兄弟組件之間需要維護(hù)同一個(gè)狀態(tài)的情況。下面這篇文章主要給大家介紹了關(guān)于學(xué)習(xí)vuex的相關(guān)資料，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-04-04