element ui table 合并行的问题？
数据结构如下 tabledata: [
{ TenderProjectId: 22787,
Tid: 7716,
ProjectState: 0,
TenderProjectName: "刘----公开招标----单价最低",
TenderCode: "BWC-GKZB-202306-01598",
PublicityName: "刘----公开招标----单价最低中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{
WinnerName: "测试-甘肃顺发建筑工程有限公司",
Price: "44400.00000000000",
Unit: "万元",
},
],
},
{
SectionName: "第二标段",
Winner: [
{
WinnerName: "测试-甘肃顺发建筑工程有限公司",
Price: "44400.00000000000",
Unit: "万元",
},
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22786,
Tid: 7715,
ProjectState: 0,
TenderProjectName: "竞磋-综合评分1",
TenderCode: "DXLYGSJYGFGS-JZXCS-202306-01597",
PublicityName: "竞磋-综合评分1中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{ WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "0.0001000", Unit: "万元" },
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22785,
Tid: 7714,
ProjectState: 0,
TenderProjectName: "刘--公开招标---总价最低",
TenderCode: "BWC-GKZB-202306-01596",
PublicityName: "刘--公开招标---总价最低中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{ WinnerName: "测试-甘肃昌泰建筑工程有限公司", Price: "8.850000", Unit: "万元" },
{ WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "8.900000", Unit: "万元" },
{ WinnerName: "测试-甘肃水工建筑工程有限公司", Price: "9.230000", Unit: "万元" },
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22784,
Tid: 7713,
ProjectState: 0,
TenderProjectName: "刘---公开招标---综合评分",
TenderCode: "BWC-GKZB-202306-01595",
PublicityName: "刘---公开招标---综合评分中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{ WinnerName: "测试-甘肃昌泰建筑工程有限公司", Price: "9.620000", Unit: "万元" },
{ WinnerName: "测试-甘肃顺发建筑工程有限公司", Price: "9.670000", Unit: "万元" },
{ WinnerName: "测试-甘肃金中信工程咨询有限公司", Price: "9.640000", Unit: "万元" },
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22783,
Tid: 7712,
ProjectState: 0,
TenderProjectName: "刘---依法招标---总价最低",
TenderCode: "BWC-YQZB-202306-01594",
PublicityName: "刘---依法招标---总价最低中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{ WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "9.490000", Unit: "万元" },
{ WinnerName: "测试-甘肃昌泰建筑工程有限公司", Price: "9.120000", Unit: "万元" },
{ WinnerName: "测试-甘肃顺发建筑工程有限公司", Price: "9.450000", Unit: "万元" },
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22782,
Tid: 7711,
ProjectState: 0,
TenderProjectName: "竞谈-总价最低1",
TenderCode: "DXLYGSJYGFGS-JZXTP-202306-01593",
PublicityName: "竞谈-总价最低1中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{ WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "0.0001000", Unit: "万元" },
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22781,
Tid: 7710,
ProjectState: 0,
TenderProjectName: "刘----依法招标----综合评分",
TenderCode: "BWC-YQZB-202306-01592",
PublicityName: "刘----依法招标----综合评分中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{ WinnerName: "测试-甘肃顺发建筑工程有限公司", Price: "9.580000", Unit: "万元" },
{ WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "9.540000", Unit: "万元" },
{ WinnerName: "测试-甘肃金中信工程咨询有限公司", Price: "9.410000", Unit: "万元" },
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22780,
Tid: 7709,
ProjectState: 0,
TenderProjectName: "刘---依法必招---单价最低",
TenderCode: "BWC-YQZB-202306-01591",
PublicityName: "刘---依法必招---单价最低中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{
WinnerName: "测试-甘肃金中信工程咨询有限公司",
Price: "45200.00000000000",
Unit: "万元",
},
{
WinnerName: "测试-甘肃昌泰建筑工程有限公司",
Price: "44100.00000000000",
Unit: "万元",
},
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22779,
Tid: 7708,
ProjectState: 0,
TenderProjectName: "依法必招-单价最低1",
TenderCode: "DXLYGSJYGFGS-GKZB-202306-01590",
PublicityName: "依法必招-单价最低1中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{
WinnerName: "测试-甘肃顺发建筑工程有限公司",
Price: "1.00000000000",
Unit: "万元",
},
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
{
TenderProjectId: 22778,
Tid: 7707,
ProjectState: 0,
TenderProjectName: "刘---邀请招标---单价最低",
TenderCode: "BWC-YQZB-202306-01589",
PublicityName: "刘---邀请招标---单价最低中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
PublicityInformation: [
{
SectionName: "第一标段",
Winner: [
{
WinnerName: "测试-甘肃金中信工程咨询有限公司",
Price: "44100.00000000000",
Unit: "万元",
},
{
WinnerName: "测试-甘肃顺发建筑工程有限公司",
Price: "44100.00000000000",
Unit: "万元",
},
{
WinnerName: "测试-甘肃水工建筑工程有限公司",
Price: "44400.00000000000",
Unit: "万元",
},
],
},
],
OpenBidTime: "",
HashEndTime: "",
},
],
效果图 
能否实现这样的效果呢
回答：
能啊，element 有合并单元格:span-method。
<el-table :data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%"
>
...
arraySpanMethod({ row, rowIndex, columnIndex }){// //下面这一段意思是，在第一列，如果挨着的两行的projectName值是一样的，就合并
if (columnIndex == 0){//第三列就 == 3
if (row.projectName != this.tableData[rowIndex - 1].projectName{
let rowSpan = 0
for (let i = rowIndex; i < this.tableData.length;i++){
if (this.tableData[i].projectName == row.projectName){
rowSpan++
} else {
break
}
}
return {
rowspan: rowSpan,
colspan: 1
}
}
//...后面希望那一列按照哪个字段合并慢慢试吧
return {
rowspan: 0,
colspan: 0
}
}
}
你这个tabledata数据结构要改成，要以最小维度来平铺数据：
[{ WinnerName: "测试-甘肃顺发建筑工程有限公司",
Price: "44400.00000000000",
Unit: "万元",
SectionName: "第一标段",
TenderProjectId: 22786,
Tid: 7715,
ProjectState: 0,
TenderProjectName: "竞磋-综合评分1",
TenderCode: "DXLYGSJYGFGS-JZXCS-202306-01597",
PublicityName: "竞磋-综合评分1中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
},
{
WinnerName: "测试-甘肃顺发建筑工程有限公司",
Price: "44400.00000000000",
Unit: "万元",
SectionName: "第二标段",
TenderProjectId: 22786,
Tid: 7715,
ProjectState: 0,
TenderProjectName: "竞磋-综合评分1",
TenderCode: "DXLYGSJYGFGS-JZXCS-202306-01597",
PublicityName: "竞磋-综合评分1中标候选人公示",
PublicityType: 1,
Phone: "0937-6713939",
IsTwoStages: false,
TwoStageNum: 1,
},
....
//目前看来数据的最小维度应该是winner这个字段，那就是有多少个winner，tabledata就得有多少条数据。只有将最小维度平铺出来才能将重复的数据再进行合并
]
回答：
<el-table :data="tabledata" :span-method="objectSpanMethod"> <el-table-column type="index" width="50"></el-table-column>
<el-table-column
label="项目名称"
prop="TenderProjectName"
align="center"
width="200"
></el-table-column>
<el-table-column label="TenderCode" prop="TenderCode"></el-table-column>
<el-table-column label="PublicityName" prop="PublicityName"></el-table-column>
<el-table-column label="PublicityType" prop="PublicityType"></el-table-column>
<el-table-column label="Phone" prop="Phone"></el-table-column>
<!-- SectionName数据展示 -->
<el-table-column label="SectionName" prop="SectionName" align="center">
<template slot-scope="scope">
<div v-if="scope.row.PublicityInformation.length > 0">
<!-- scope.row.PublicityInformation要是两个数据就渲染两个单元格 -->
<div
v-for="(item, index) in scope.row.PublicityInformation"
style="width:100%;min-height:45px; text-align:center; border-bottom:1px solid #ebeef5;"
>
{{ item.SectionName }}
</div>
</div>
<div v-else>-</div>
</template>
</el-table-column>
</el-table>现在我该怎么处理PublicityInformation里面的数据呢
以上是 element ui table 合并行的问题？ 的全部内容， 来源链接： utcz.com/p/934523.html
