@这是我最近正在做的一个项目，遇到的问题，就是想单纯的记录下
这是成品效果图（多级表头+多个table循环）
HTML代码
<template>
<div>
<div class="tableList" style="padding:20px" v-loading="loading">
<div class="tableTitle">表格标题</div>
<div v-for="item, index in tableData" :key="index + 99">
<!-- 部门 type===2为财务部-->
<el-table id="table" :data="monthList" style="width: 100%">
<el-table-column prop="monthName" label="月份" width="70" align="center" />
<el-table-column v-for="item2, index2 in item.users" :label="item2.userName" align="center"
:key="index2 + 999">
<el-table-column v-if="item.type === 1" label="收入贡献度" width="95" align="center">
<el-table-column label="实际" width="95" align="center">
<template slot-scope="scope">
<span class="custom-header-class">{{ padWithZeros(item2.yearmonthdata[scope.row.index].num1) }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column :label="item.type === 1 ? '价值贡献度' : '收入贡献度'" width="95" align="center">
<el-table-column label="计划" width="95" align="center">
<template slot-scope="scope">
<span class="custom-header-class">{{ item.type === 1 ?
padWithZeros(item2.yearmonthdata[scope.row.index].num2) :
(item2.yearmonthdata[scope.row.index].num1) }}</span>
</template>
</el-table-column>
<el-table-column label="实际" width="95" align="center">
<template slot-scope="scope">
<span class="custom-header-class">{{ item.type === 1 ?
padWithZeros(item2.yearmonthdata[scope.row.index].num3) :
padWithZeros(item2.yearmonthdata[scope.row.index].num2) }}</span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
JS代码
表格是按部门排的，每个部门为一个Table,每个表格里面按部门里人来排列
data() {
return {
tableData: [],
loading: false,
monthList: [
{
id: 1,
monthName: '1月',
index: 0
},
{
id: 2,
monthName: '2月',
index: 1
},
{
id: 3,
monthName: '3月',
index: 2
},
{
id: 4,
monthName: '4月',
index: 3
},
{
id: 5,
monthName: '5月',
index: 4
},
{
id: 6,
monthName: '6月',
index: 5
},
{
id: 7,
monthName: '7月',
index: 6
},
{
id: 8,
monthName: '8月',
index: 7
},
{
id: 9,
monthName: '9月',
index: 8
},
{
id: 10,
monthName: '10月',
index: 9
},
{
id: 11,
monthName: '11月',
index: 10
},
{
id: 12,
monthName: '12月',
index: 11
}
],
}
},
created() {
this.getPreview()
},
mounted() {
},
methods: {
// 获取列表
getPreview(year) {
this.loading = true
getPreviewlist(year).then(res => {
if (res.data.length > 0) {
this.tableData = res.data[0].depts
} else {
this.$message.error('暂无数据');
}
this.loading = false
})
},
// 处理数据
padWithZeros(num) {
// 检查是否为整数
if (Number.isInteger(num)) {
// 将数字转换为字符串并在后面补两个0
return num.toString() + '.00';
} else {
// 如果数字不是整数，直接返回原数字
return num;
}
}
},
}
数据结构
"code": 0,
"data": [
{
"year": "2024",
"depts": [
{
"deptName": "技术服务部",
"type": 1,
"users": [
{
"userId": 181,
"userName": "技术服务部负责人",
"leader": false,
"yearmonthdata": [
{
"month": "1",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "2",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "3",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "4",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "5",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "6",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "7",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "8",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "9",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "10",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "11",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
},
{
"month": "12",
"num1": 0.0,
"num2": 0.0,
"num3": 0.0
}
]
},
{
"userId": 193,
"userName": "技术服务部项目经理",
"leader": false,
"yearmonthdata": [...]
}
]
},
{
"deptName": "财务部",
"type": 2,
"users": [
{
"userId": 182,
"userName": "财务部负责人",
"leader": false,
"yearmonthdata": [...]
},
]
}
]
}
]
}
],
"msg": "",
"sucess": true
}
