elementUI table纵向合并

methods:{
// 获取表格数据
    async getTableData() {
      // 表格查询
      let data = {
        dealId: "selectDetial",
        pageInfo: this.pageInfo,
        selectForm: this.selectForm,
      };
      let res = await getTableInfo(data);
      if (res.status == true) {
        this.tableData = res.msg.resultList;
        this.pageInfo.total = res.msg.totalCount;
        //进行解析数据
        this.jiexi();
      }
    },
//合并装备名称相同的列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //rowIndex：行    columnIndex：列
      let { tableData } = this;
      if (columnIndex == 1) {//如果是列的下标是1，进行判断如果有重复出现的装备名称就只显示一个
        if (row.showEquipment) {
          return {
            rowspan: this.tempDetailslistMonth[tableData[rowIndex].C_EquipmentName],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    jiexi(){
      let tempDetailslistMonth = {};
    this.tableData.map((item) => {
      if (tempDetailslistMonth[item.C_EquipmentName]) {
        tempDetailslistMonth[item.C_EquipmentName]++;
        item.showEquipment = false;
        return item;
      } else {
        tempDetailslistMonth[item.C_EquipmentName] = 1;
        item.showEquipment = true;
        return item;
      }
    });
    this.tempDetailslistMonth = tempDetailslistMonth;
    }
},
created(){
this.getTableData();
}

页面

 <el-table
        :border="true"
        :span-method="objectSpanMethod"
        :row-class-name="tableRowClassName"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; background: #003629"
      >
        <el-table-column
          type="index"
          :index="indexMethod1"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="C_EquipmentName"
          label="装备名称"
        ></el-table-column>
</el-table>