elementPlus中table合并部分列

虚拟数据中公司下有多个客户，公司一样的客户，公司列需要合并，客户如果一样也需要合并进行展示，效果展示

const tableData = ref([])自定定义自已想要的数据，一般都是通过接口拿到

//table
<template><el-table:data="tableData"style="width: 80vw; margin-bottom: 20px":row-class-name="(({row}) => row.rowClass)"border:span-method="tableSpanMethod"><el-table-column prop="company_name" label="公司" width="200"></el-table-column><el-table-column prop="firm_name" label="客户名称"></el-table-column><el-table-column prop="user_name" label="名称"></el-table-column><el-table-column prop="biz_date" label="日期"></el-table-column><el-table-column prop="" label="金额"><el-table-column prop="back_date" label="日期"></el-table-column><el-table-column prop="back_status" label="已退"></el-table-column><el-table-column prop="dc_money" label="金额(元)"></el-table-column></el-table-column><el-table-column prop="balance_money" label="余额(元)"></el-table-column></el-table></template>

定义一个方法进行数据处理：

const getData = ()=>{let temp = [],companyRow,firmRowtableData.forEach((item,index)=>{temp.push(item)companyRow = !companyRow ? Object.assign(item, {companySpan: 0}) : companyRowcompanyRow.companySpan++firmRow = !firmRow ? Object.assign(item, {firmSpan: 0}) : firmRowfirmRow.firmSpan++if(item.company_name != tableData[index + 1]?.company_name){companyRow = nullfirmRow = null}else{if(item.firm_name !== tableData[index+ 1]?.firm_name){firmRow = null}}})}

然后是tableSpan的方法定义：

const tableSpanMethod = ({row,column,rowIndex,columnIndex})=>{if(column.property ===  'company_name'){return row.companySpan ? [row.companySpan, 1] : [0,0]}if(column.property == 'firm_name'){return row.firmSpan ? [row.firmSpan, 1] : [0,0]}}