vue结合Element - ui实现行合并（看懂这个以后的行合并都不是问题）

今天客户提了个需求，要实现这样得数据展示。

每个技术标中的供应商的评分要素是一定的，例如在这个数据中每个技术标供应商的评分要素就只有4个，底下还有一个商务标。
话不多说上一下后端给我的假数据。

这样的数据有63条，我让后端给我的是按评分要素作为最小单位的详细数据，因为要是按嵌套数组的方式给我的话，难度可能比较大。

下面展示完整代码

<template>
  <div>
    <el-button @click="aaa"></el-button>
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
      <el-table-column prop="teamDesc" label="组别" width="80" align="center"></el-table-column>
      <el-table-column prop="bidderDesc" label="供应商" width="190" align="center"></el-table-column>
      <el-table-column prop="scoringElementsDesc" label="评分要素" align="center"></el-table-column>
      <el-table-column prop="elementsScore" label="得分" width="60" align="center"></el-table-column>
      <el-table-column prop="expertDesc" label="评标专家" width="80" align="center"></el-table-column>
      <el-table-column prop="expertSuggestion" label="专家意见" width="90" align="center"></el-table-column>
      <el-table-column prop label="专家签名" width="90" align="center"></el-table-column>
      <el-table-column prop="leaderFlag" label="专家组长" width="90" align="center"></el-table-column>
      <el-table-column prop="scoreDate" label="评标日期" width="100" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { bidScoreList } from "@/api/material";
export default {
  data() {
    return {
      tableData: [],
      // 商务组和技术组数量
      zubieS: "",
      zubieJ: "",
      // 评分要素个数
      yaosuNum: 1,
      yaosuNum2: 1,
      // 评分要素、专家意见、评标日期行号集合
      rowindex: [],
      // 评标专家行号集合
      zhuanjia: [],
      temp: 1,
      temp1: 1,
      // 每个专家合并行数
      zhuanjiarow: [],
      // 商务技术组专家不合并
      up: 0,
      down: 1,
      Breakrow: 0
    };
  },
  methods: {
    aaa() {
      window.print();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 组别
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: this.zubieS,
            colspan: 1
          };
        }
        if (rowIndex === this.zubieS) {
          return {
            rowspan: this.zubieJ,
            colspan: 1
          };
        } else {
          return [0, 0];
        }
      }
      // 供应商、专家意见、评标日期
      if (
        (columnIndex === 1 || columnIndex === 5 || columnIndex === 8) &&
        rowIndex < this.zubieS
      ) {
        if (this.rowindex.includes(rowIndex)) {
          return {
            rowspan: this.yaosuNum,
            colspan: 1
          };
        } else {
          return [0, 0];
        }
      }
      if (
        (columnIndex === 1 || columnIndex === 5 || columnIndex === 8) &&
        rowIndex >= this.zubieS
      ) {
        if (this.rowindex.includes(rowIndex)) {
          return {
            rowspan: this.yaosuNum2,
            colspan: 1
          };
        } else {
          return [0, 0];
        }
      }
      // 评标专家、专家组长、专家签名
      if (columnIndex === 4 || columnIndex === 6 || columnIndex === 7) {
        if (this.zhuanjia.includes(rowIndex)) {
          return {
            rowspan: this.zhuanjiarow[this.zhuanjia.indexOf(rowIndex)],
            colspan: 1
          };
        } else {
          return [0, 0];
        }
      }
    }
  },
  created() {
    let params = {
      entrustmentHeaderId: this.$route.query.entrustmentHeaderId,
      round: this.$route.query.round
    };
    bidScoreList(params).then(res => {
      this.tableData = res.content;
      console.log(res.content);
      // 循环得到合并组别数
      let i = 0;
      let j = 0;
      for (let item of res.content) {
        if (item.teamDesc === "商务组") {
          i++;
          this.zubieS = i;
        } else {
          j++;
          this.zubieJ = j;
        }
      }
      console.log("商务组个数", this.zubieS);
      console.log("技术组个数", this.zubieJ);
      // 获得评分要素个数
      for (let i = this.zubieS - 1; i > 0; i--) {
        if (this.tableData[i].bidderDesc === this.tableData[i - 1].bidderDesc) {
          this.yaosuNum++;
        } else {
          break;
        }
      }
      console.log("商务组评分要素个数", this.yaosuNum);
      for (let i = this.zubieS; i < this.tableData.length - 1; i++) {
        if (this.tableData[i].bidderDesc === this.tableData[i + 1].bidderDesc) {
          this.yaosuNum2++;
        } else {
          break;
        }
      }
      console.log("技术组评分要素个数", this.yaosuNum2);
      // 获得合并供应商、专家意见、评标日期行号
      for (let i = 0; i < this.zubieS; i = i + this.yaosuNum) {
        this.rowindex.push(i);
      }
      for (
        let i = this.zubieS;
        i <= this.tableData.length - 1;
        i = i + this.yaosuNum2
      ) {
        this.rowindex.push(i);
      }
      console.log("供应商、专家意见、评标日期合并行号集合", this.rowindex);

      if (
        this.tableData[this.zubieS].expertDesc !==
        this.tableData[this.zubieS + 1].expertDesc
      ) {
        // 获得评标专家换行行号
        this.zhuanjia.push(0);
        for (let i = 0; i < this.tableData.length - 1; i++) {
          if (
            this.tableData[i].expertDesc === this.tableData[i + 1].expertDesc
          ) {
            this.temp++;
          } else {
            this.zhuanjia.push(this.temp);
            this.temp++;
          }
        }
        console.log("评标专家换行行号", this.zhuanjia);
        // 获得每个专家合并的行数
        for (let i = 0; i < this.zhuanjia.length - 1; i++) {
          let num = this.zhuanjia[i + 1] - this.zhuanjia[i];
          this.zhuanjiarow.push(num);
        }
        this.zhuanjiarow.push(
          this.tableData.length - this.zhuanjia[this.zhuanjia.length - 1]
        );
        console.log("每个专家行合并数", this.zhuanjiarow);
      } else {
        // 获得评标专家换行行号
        this.zhuanjia.push(0);
        for (let i = 0; i < this.tableData.length - 1; i++) {
          if (
            this.tableData[i].expertDesc === this.tableData[i + 1].expertDesc
          ) {
            this.temp++;
          } else {
            this.zhuanjia.push(this.temp);
            this.temp++;
          }
        }
        console.log("评标专家换行行号", this.zhuanjia);
        // ===================================没问题===========================================================================================
        // 获得每个专家合并的行数
        for (let i = 0; i < this.zhuanjia.length - 1; i++) {
          let num = this.zhuanjia[i + 1] - this.zhuanjia[i];
          this.zhuanjiarow.push(num);
        }
        this.zhuanjiarow.push(
          this.tableData.length - this.zhuanjia[this.zhuanjia.length - 1]
        );
        console.log("每个专家行合并数", this.zhuanjiarow);
      }
      console.log(
        "========================================================分割线==============================================================="
      );
      for (let i = this.zubieS; i > 0; i--) {
        if (this.tableData[i].expertDesc === this.tableData[i - 1].expertDesc) {
          this.up++;
        } else {
          break;
        }
      }
      console.log("up", this.up);
      for (let i = this.zubieS; i < this.tableData.length - 1; i++) {
        if (this.tableData[i].expertDesc === this.tableData[i + 1].expertDesc) {
          this.down++;
        } else {
          break;
        }
      }
      console.log("down", this.down);
      for (let i = 0; i < this.zhuanjia.length; i++) {
        if (this.zhuanjia[i] < this.zubieS) {
          this.Breakrow = this.zhuanjia[i];
        }
      }
      console.log("需要夹断的行号", this.Breakrow);
      this.zhuanjia.splice(
        this.zhuanjia.indexOf(this.Breakrow) + 1,
        0,
        this.Breakrow + this.up
      );
      console.log("夹断后新的专家换行数组序号", this.zhuanjia);
      this.zhuanjiarow.splice(this.zhuanjia.indexOf(this.Breakrow), 0, this.up);
      this.zhuanjiarow.splice(
        this.zhuanjia.indexOf(this.Breakrow) + 1,
        1,
        this.down
      );
      console.log("夹断后新的专家换行行数数组序号", this.zhuanjiarow);
      console.log(
        "========================================================分割线==============================================================="
      );
    });
  }
};
</script>

<style>
</style>

给大家上一下效果


不懂得可以留言问，具体问题具体谈，溜了溜了