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

��

1：页面html

            批量办结      导出      打印      返回                生成汇总签单成功，可到汇总签单数据列表查看审批情况              {{tableTitle}}       {{ tableName }}               填单日期:{{ tableCreatTime }}                     编号：{{ codeNum }}                                    {{ scope.row.label }}             {{ scope.row.label }}                                                小写            大写            {{ scope.row.labelLater }}                                                                {{ scope.row.labelLater }}                        {{ scope.$index+1 }}                                                                {{ scope.$index+1 }}                                      {{ scope.row.unit }}                                                               有退回                                                                                                    {{ scope.row.unit }}                                                               有退回                                                  {{ scope.row.amount }}                                                                {{ scope.row.amount }}                                                        0" ref="bottomTableREF">                                    {{ scope.row.userName }}                                                {{ scope.row.unitName }}                                                {{ scope.row.creatTime }}                                                {{ scope.row.paymentCode }}                                                {{ scope.row.applyAmount }}                                                {{ scope.row.opinion }}                              

2：js部分

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