element ui table 合并行的问题？

Question

数据结构如下 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: "",
    },
  ],

效果图
能否实现这样的效果呢

Answer 1

能啊，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就得有多少条数据。只有将最小维度平铺出来才能将重复的数据再进行合并

]

Answer 2

      <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里面的数据呢