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"borderstyle="width: 100%; margin-bottom: 20px":header-cell-style="headerCellStyle":cell-style="{textAlign:'center'}"><el-table-columnprop="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-columnprop=""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-columnwidth="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-columnmin-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-columnwidth="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-tableclass="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 一个 1if(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>