效果图:
接口数据
var list = [
{
"id": "16EE8A54E6917F6479905CDC5B031F22",
"activityPointsDOS": [
{
"id": "16EE8A54E0C17F647404A2DC7783EE88",
"activityPointsDOS": [
{
"id": "1",
"value": "6",
"activityName": "坚定政治立场。",
"message": " (1)牢固树立“四个意识”巴拉巴拉",
"period": "19上半年"
},
{
"id": "2",
"value": "8",
"activityName": "坚定政治立场。",
"message": "(2)严格遵守政治纪律和政治规矩.巴拉啦",
"period": "19上半年"
}
],
"activityName": "1. 坚定政治立场。(10分)"
},
{
"id": "16EE8A54E4817F64779EF35CC6671C10",
"activityPointsDOS": [
{
"id": "3",
"value": "7",
"activityName": "坚持学习提高。",
"message": "(1)及时认真参加支部集体学习....",
"period": "19上半年"
},
{
"id": "4",
"value": "3",
"activityName": "坚持学习提高。",
"message": "(2)每年集中学习培训....",
"period": "19上半年"
},
{
"id": "5",
"value": "5",
"activityName": "坚持学习提高。",
"message": "(3)有取得更高....位",
"period": "19上半年"
}
],
"activityName": "2.坚持学习提高。(6分)"
},
{
"id": "16EE8A54E4817F64779EF35CC6671C10",
"activityPointsDOS": [
{
"id": "6",
"value": "7",
"activityName": "严格组织生活。",
"message": "(1)按季度.....",
"period": "19上半年"
},
{
"id": "7",
"value": "3",
"activityName": "严格组织生活。",
"message": "(2)按时上党课.......。",
"period": "19上半年"
},
{
"id": "8",
"value": "5",
"activityName": "坚持学习提高。",
"message": "(3)积极参加",
"period": "19上半年"
}
],
"activityName": "3.严格组织生活。(13分)"
}
],
"category": "合格积分\r\n(40分)"
},
{
"id": "16EE8A54FF617F6491391BD04A0D4E7F",
"activityPointsDOS": [
{
"id": "16EE8A54EA517F647D257760897C805F",
"activityPointsDOS": [
{
"id": "8",
"value": "10",
"activityName": "1.所在基层党组织情况。(10分)",
"message": " (1) 根据所在.....",
"period": "19上半年"
}
],
"activityName": "1.所在基层党组织情况。(10分)"
},
{
"id": "16EE8A54E8517F647B3DE374CF0D6D93",
"activityPointsDOS": [
{
"id": "10",
"value": "3",
"activityName": "2.年度评议、考核情况。(10分)",
"message": " (1) 在党建....",
"period": "19上半年"
},
{
"id": "9",
"value": "10",
"activityName": "2.年度评议、考核情况。(10分)",
"message": " (2)在年度.........................................................................",
"period": "19上半年"
}
],
"activityName": "2.年度评议、考核情况。(10分)"
}
],
"category": "综合积分\r\n(20分)"
}
];
前端代码
<el-table
:data="alldata"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="category"
label="项目及分值"
width="180">
</el-table-column>
<el-table-column
prop
label="参考标准及评价方法">
<el-table-column prop="activityName"></el-table-column>
<el-table-column prop="message"></el-table-column>
</el-table-column>
<el-table-column
prop="value"
label="参考分值">
</el-table-column>
</el-table>
// 1. 获取后台数据
created() {
// 二次处理数据
this.alldata = this.handleTableArr(list);
console.log(this.alldata);
},
methods: {
// 解析数据
handleTableArr(data) {
let arr = [];
for (let i = 0; i < data.length; i++) {
let category_info = data[i];
let activityPointsDOS = category_info["activityPointsDOS"];
let count = 0;
for (let j = 0; j < activityPointsDOS.length; j++){
let activityTwo_info = activityPointsDOS[j];
let activityTwo_activityPointsDOS = activityPointsDOS[j]["activityPointsDOS"];
for (let k = 0; k < activityTwo_activityPointsDOS.length; k++){
count ++;
let info = {
// 确定每天数据的 合并行的数量
span_num: k === 0 ? activityTwo_activityPointsDOS.length : 0,
value:activityTwo_activityPointsDOS[k]["value"],
message:activityTwo_activityPointsDOS[k]["message"],
activityName:activityTwo_info["activityName"],
category: category_info["category"],
};
arr.push(info);
}
}
// 第一列的合并数量, 赋值给每个大项的第一个单元格. 比如合格积分要合并 8 行.
arr[arr.length - count]["count"] = count;
}
return arr;
},
// 表格合并的方法
arraySpanMethod({row, column, rowIndex, columnIndex}) {
// 第一列
if (columnIndex === 0){
if (row.count){
return [row.count, 1]
}else{
return [0, 0]
}
}
// 第二列
if (columnIndex === 1){
if (row.span_num > 0 ){
return [row.span_num, 1]
}else{
return [0, 0]
}
}
}
}