el-table 指定表格合并行与单元格，以及表头合并单元格

1：页面html

<template>
  <div class="container">
    <div class="flex-end">
      <el-button type="primary" @click="allEndBtn">批量办结</el-button>
      <el-button type="primary" @click="downLoadBtn">导出</el-button>
      <el-button type="primary" @click="printBtn">打印</el-button>
      <el-button type="primary" @click="backBtn">返回</el-button>
    </div>
    <div class="flex-center red lineH40 fontSize16">
        生成汇总签单成功，可到汇总签单数据列表查看审批情况
    </div>
    <div class="lineH30">
      <div class="flex-center fontSize18">{{tableTitle}}</div> 
      <div class="flex-center fontSize18">{{ tableName }}</div>
      <div class="flex-center fontSize12">
         填单日期:{{ tableCreatTime }}
      </div>
    </div> 
    <div class="" ref="hzqdREF">
      <div class="flex-end">编号：{{ codeNum }}</div>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-bottom: 20px"
        :header-cell-style="headerCellStyle"
        :cell-style="{textAlign:'center'}">
        <el-table-column
          prop="label"
          label="会签项目"
          width="150">
          <template slot-scope="scope">
            <div v-if="scope.$index==3">{{ scope.row.label }}</div> 
            <div v-else>{{ scope.row.label }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label=""
          width="60">
          <template slot-scope="scope">
            <div v-if="scope.$index==3">小写</div>
            <div v-else-if="scope.$index==4">大写</div>
            <div v-else>{{ scope.row.labelLater }}</div>
          </template>
        </el-table-column>
        <el-table-column 
          min-width="160"
          prop="labelLater"
          :label="tableObj.projectName">
          <template slot-scope="scope">
            <div v-if="scope.$index==3||scope.$index==4">
                {{ scope.row.labelLater }}
            </div>
            <div v-else>{{ scope.$index+1 }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          prop="index"
          label="序号">
          <template slot-scope="scope">
            <div v-if="scope.$index==3||scope.$index==4">
                {{ scope.$index+1 }}
            </div>
            <div class="flex" v-else>
              <div>{{ scope.row.unit }}</div> 
              <div>
                <div class="backTag " v-if="scope.row.backed==1">
                <div class="sanJiao"></div>
                <div class="backColor">有退回</div>
              </div>
            </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="260"
          prop="unit"
          label="单位/内容">
          <template slot-scope="scope">
            <div class="flex" v-if="scope.$index==3||scope.$index==4">
              <div>{{ scope.row.unit }}</div> 
              <div>
                <div class="backTag " v-if="scope.row.backed==1">
                <div class="sanJiao"></div>
                <div class="backColor">有退回</div>
              </div>
            </div>
            </div>
            <div v-else>{{ scope.row.amount }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="amount"
          label="金额">
          <template slot-scope="scope">
            <div v-if="scope.$index==3||scope.$index==4">
                {{ scope.row.amount }}
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="bottomTableData.length>0" ref="bottomTableREF">
      <el-table
        class="margin-B30" 
        v-loading="loading"
        :data="bottomTableData"
        :border="true"
        style="width: 100%"
        :header-cell-style="{textAlign:'center'}"
        :cell-style="{textAlign:'center'}">
        <el-table-column fixed label="处理人" width="100">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column fixed label="处理单位" width="200">
          <template slot-scope="scope">
            {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column fixed label="处理时间" width="100">
          <template slot-scope="scope">
            {{ scope.row.creatTime }}
          </template>
        </el-table-column>
        <el-table-column fixed label="付款申请编号" width="160">
          <template slot-scope="scope">
            {{ scope.row.paymentCode }}
          </template>
        </el-table-column>
        <el-table-column fixed label="申请金（元）" width="130">
          <template slot-scope="scope">
            {{ scope.row.applyAmount }}
          </template>
        </el-table-column>
        <el-table-column fixed label="处理意见" min-width="240">
          <template slot-scope="scope">
            {{ scope.row.opinion }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

2：js部分

<script>
import { downloadPdf, printPdf } from "@/utils/index";
import { numberToQianFenWei } from "@/utils/qianFenWei.js";
export default {
  data () {
    return {
      tableTitle:"上海申通地铁建设集团有限公司",
      tableName:"工程项目汇总签单",
      tableCreatTime:"2023年06月10日",
      codeNum:"",
      mergeObj: {}, // 用来记录需要合并行的下标
      // 表格中的列名
      tableProps: [
        'label',
        'labelLater',
        'index',
        'unit',
        'amount',
      ] ,
      tableData: [],
      tableObj:{
        projectName:"会签项目111",// 会签项目
        paymentDate:"支付日期22",// 支付日期
        allcCountersign:"会签总笔数33",// 会签总笔数
        dataList:"单据数量44",// 单据数量
        countersignAllAmount:"11111",// 会签总金额
        countersignAllAmountDX:"十一元整",// 会签总金额
        CWFZRsign:"财务负责人签字",// 财务负责人签字
        JTDSZsign:"集团董事长签字",// 集团董事长签字
      },
      loading:false,
      bottomTableData:[{}],
    };
  },
  watch:{
    "tableData":function (newVal,oldVal){
      if(newVal.length>0){
        this.getSpanArr(this.tableData);
      }
    }
  },
  created () {
    // 
    setTimeout(()=>{
      this.getData();
    },1000)
  },
  computed: {
    // 千分位元 保留两位小数
    QFWYBLLWXS(){
      return (val) => {
        if(val===null||val===""){
          return "";
        }else if(val==="0"||val===0){
          return "0.00";
        }else{
          let LiangWeiXaioShu=(val-0).toFixed(2);
          if( isNaN(LiangWeiXaioShu)){
            return "";
          }else{
            if(LiangWeiXaioShu>=0){
              return numberToQianFenWei(LiangWeiXaioShu);
            }else{
              return "-"+numberToQianFenWei(
                String(LiangWeiXaioShu).slice(1)
              );
            }
          } 
        }
      }
    }
  },
  methods:{
    // 批量办结
    allEndBtn(){},
    // 导出
    downLoadBtn(){
      downloadPdf(
        this.$refs["refsPayOrderListTable"],
        this.tableTitle + this.tableName,
        "1300px",
        this.codeNum,
        {
          textAlign: "left",
          font: "30px Vedana",
          x: 10,
          conHeight: 500,
          conWidth: 600,
        }
      );
      if(this.$refs["bottomTableREF"]){
        downloadPdf(
            this.$refs["bottomTableREF"],
            this.tableTitle + this.tableName + '意见',
            "1300px",
            this.codeNum,
            {
              textAlign: "left",
              font: "30px Vedana",
              x: 10,
              conHeight: 500,
              conWidth: 1000,
            }
        );
      }
    },
    // 打印
    printBtn(){
      if(this.bottomTableData.length > 0){
        this.$refs["bottomTableREF"].style.width =  '1530px'
        printPdf(
            [this.$refs["hzqdREF"],this.$refs["bottomTableREF"],],
            "",
            "",
            "1",
            this.codeNum,
            {
              textAlign: "left",
              font: "30px Vedana",
              x: 10,
              conHeight: 500,
              conWidth: 1000,
            }
        );
        setTimeout(() => {
          this.$refs["bottomTableREF"].style.width =  ''
        }, 500)
      } else {
        printPdf(
            [this.$refs["hzqdREF"]],
            "",
            "",
            "1",
            this.codeNum,
            {
              textAlign: "left",
              font: "30px Vedana",
              x: 10,
              conHeight: 500,
              conWidth: 1000,
            }
        );
      }
    },
    // 返回
    backBtn(){
      this.$router.go(-1);
    },
    //表格头部样式
    headerCellStyle({ row, column, rowIndex, columnIndex }){
      // 第一步：设置表头的第0列暂不操作，将地1列和第2列隐去使其消失
      if ((columnIndex == 1)) {
        return { display: "none" };
      }
      // // 第二步， 由于1、2列没有了，后续列就会贴上来（后续列往左错位问题）
      if ((rowIndex == 0) & (columnIndex == 0)) {
        // 解决后续列错位问题，就是将隐去的第1列的位置再补上，通过第0列来补
        this.$nextTick(() => {
          /*原来第0列只占据一个位置，现在要去占据两个位置。
            即占据两列，即设置为横向两个单元格
          */ 
        document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
          /*这里的column.id实际是dom元素的class，
            故用点.不用井#，可审查dom验证
            所以 --通过设置原生的colspan属性，
            让原来的第一列只占据一个单元格的表头占据2个单元格即可
          */  
        });
      }
      return { textAlign:'center',backgroundColor:"white", }
    },
    // getSpanArr方法
    getSpanArr(data) {
      this.tableProps.forEach(propVal=> {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[propVal] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if(index === 0) {
            this.mergeObj[propVal].push(1);
          } else {
            /*判断当前行是否与上一行其值相等
            如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 
            并push 一个 0 作为占位
            */  
            if(item[propVal] === data[index - 1][propVal]) { 
              this.mergeObj[propVal][count] += 1;
              this.mergeObj[propVal].push(0);
            } else {
              // 如果当前行和上一行其值不相等 
              count = index; // 记录当前位置 
              this.mergeObj[propVal].push(1); // 重新push 一个 1
            }
          }
        })
      })
    },
    // objectSpanMethod方法
    /*默认接受四个值
        ----row==当前行的数据
        ----column==当前列的数据
        ----rowIndex==行的下标
        ----columnIndex==列的下标
    */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 只有 第一列  合并行
      if(columnIndex===0){
        // 判断列的属性
        if(this.tableProps.indexOf(column.property) !== -1) {
          // 判断其值是不是为0 
          if(this.mergeObj[column.property][rowIndex]) { 
            return {
              rowspan: this.mergeObj[column.property][rowIndex],
              colspan: rowIndex===3?1: 2
            };
          } else {
            // 如果为0则为需要合并的行
            return {
              rowspan: 0,
              colspan: 0
            }; 
          }
        }
      }
    },
    // 获取表格数据
    getData(){
      this.tableData=[];
      //{},{},{},{},{},{},{},{},{}, {unit:"a阿萨达"}
      this.tableData=[];
      if(this.tableData.length<10){
        let zeroData={
          label:"支付日期",
          labelLater:this.tableObj.paymentDate,
          unit:this.tableData[0]!=undefined?
            this.tableData[0].unit:"阿达阿达是的",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"1",
          amount:this.tableData[0]!=undefined?this.tableData[0].amount:""
        };
        let oneData={
          label:"会签总笔数",
          labelLater:this.tableObj.allcCountersign,
          unit:this.tableData[1]!=undefined?
            this.tableData[1].unit:"阿达阿达是的阿达阿达是",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[1]!=undefined?this.tableData[1].amount:""
        };
        let twoData={
          label:"单据数量",
          labelLater:this.tableObj.dataList,
          unit:this.tableData[2]!=undefined?this.tableData[2].unit:"",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[2]!=undefined?this.tableData[2].amount:""
        };
        let threeData={
          label:"会签总金额",
          labelLater:this.QFWYBLLWXS(this.tableObj.countersignAllAmount),
          unit:this.tableData[3]!=undefined?this.tableData[3].unit:"",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[3]!=undefined?this.tableData[3].amount:""
        };
        let fourData={
          label:"会签总金额",
          labelLater:this.tableObj.countersignAllAmountDX,
          unit:this.tableData[4]!=undefined?this.tableData[4].unit:"",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[4]!=undefined?this.tableData[4].amount:""
        };
        let fiveData={
          label:"财务负责人",
          labelLater:this.tableObj.CWFZRsign,
          unit:this.tableData[5]!=undefined?this.tableData[5].unit:"",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[5]!=undefined?this.tableData[5].amount:""
        };
        let sixData={
          label:"集团董事长",
          labelLater:this.tableObj.JTDSZsign,
          unit:this.tableData[6]!=undefined?this.tableData[6].unit:"",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[6]!=undefined?this.tableData[6].amount:""
        };
        let sevenData={
          label:"网银录入",
          labelLater:"",
          unit:this.tableData[7]!=undefined?this.tableData[7].unit:"",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[7]!=undefined?this.tableData[7].amount:""
        };
        let eightData ={
          label:"网银复核",
          labelLater:"",
          unit:this.tableData[8]!=undefined?this.tableData[8].unit:"",
          backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
          amount:this.tableData[8]!=undefined?this.tableData[8].amount:""
        };
        this.tableData.splice(0,1,zeroData);
        this.tableData.splice(1,1,oneData);
        this.tableData.splice(2,1,twoData);
        this.tableData.splice(3,1,threeData);
        this.tableData.splice(4,1,fourData);
        this.tableData.splice(5,1,fiveData);
        this.tableData.splice(6,1,sixData);
        this.tableData.splice(7,1,sevenData);
        this.tableData.splice(8,1,eightData);
        console.log("少于9条数据========",this.tableData)
      }else{
        this.addArrPoperty(this.tableData,0,"支付日期",
            this.tableObj.paymentDate
        );
        this.addArrPoperty(this.tableData,1,"会签总笔数",
            this.tableObj.allcCountersign
        );
        this.addArrPoperty(this.tableData,2,"单据数量",
            this.tableObj.dataList
        );
        this.addArrPoperty(this.tableData,3,"会签总金额",
            this.QFWYBLLWXS(this.tableObj.countersignAllAmount)
        );
        this.addArrPoperty(this.tableData,4,"会签总金额",
            this.tableObj.countersignAllAmountDX
        );
        this.addArrPoperty(this.tableData,5,"财务负责人",
            this.tableObj.CWFZRsign
        );
        this.addArrPoperty(this.tableData,6,"集团董事长",
            this.tableObj.JTDSZsign
        );
        this.addArrPoperty(this.tableData,7,"网银录入","");
        this.addArrPoperty(this.tableData,8,"网银复核","");
        console.log("多于9条数据========",this.tableData)
      }
    },
    addArrPoperty(arr,index,label,labelLater){
      arr[index].label=label;
      arr[index].labelLater=labelLater;
    },
  }
}
</script>

3：样式

<style scoped>
  .red{
    color: red;
  }
  .lineH40{
    line-height: 40px;
  }
  .lineH30{
    line-height: 30px;
  }
  .fontSize16{
    font-size: 16px;
  }
  .fontSize18{
    font-size: 18px;
    font-weight: 500;
  }
  .fontSize12{
    font-size: 12px;
    font-weight: 600;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid #7f7f7f;
    width: 100%;
    margin-bottom: 30px;
  }
  table td {
    padding: 8px;
    border: 1px solid #7f7f7f;
    text-align: center;
    min-width: 80px;
    min-height: 30px;
  }
  .headStyle td{
    text-align: center; 
    font-weight: 600;
  }
  .margin-B30{
    margin-bottom: 30px;
  }
  .backTag{
    margin-left: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sanJiao{
    content:"";
    border:11px solid red;
    border-top-color:transparent;
    border-left-color:transparent;
    border-bottom-color:transparent;
    width:0px;
    height:0px;
  }
  .backColor{
    border: none;
    background-color: red;
    padding-right: 5px;
    color: white;
  }
</style>