Element 的Table表格实现列合并（记得先排序、element-plus、列合并、线上已投入使用）

系列文章目录

提示：当前的功能已经投入项目中使用了，不要担心回发生什么问题！！！代码有问题直接私信我就好👌

---

---

背景如下

需求是
1、服务与不同的船公司，分别有进出口的分类
2、希望对相同业务，价格，进行列合并
3.、一句话：合并前几列相同的列，只要数据相同就可以合并

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Element-Plus 中Table表格的列合并（初版）

1.效果图如下

2. DOM结构 如下

 <div><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /><el-table-column prop="amount1" label="Amount 1" /><el-table-column prop="amount2" label="Amount 2" /><el-table-column prop="amount3" label="Amount 3" /></el-table></div>

3.TypeScript代码如下

interface User {id: stringname: stringamount1: stringamount2: stringamount3: number
}interface SpanMethodProps {row: Usercolumn: TableColumnCtx<User>rowIndex: numbercolumnIndex: number
}const values =ref("")
const value1 =reactive({})
const objectSpanMethod = ({row,column,rowIndex,columnIndex,
}: SpanMethodProps) => {if(columnIndex == 0){let spanCount = 1;// 从当前行往下找for (let i = rowIndex + 1 ; i < tableData.length; i++) {if (tableData[i][column.property] === row[column.property]) {spanCount++;values.value =  row[column.property]} else {break;}}if(spanCount === 1 && !value1[`${values.value}`])   return [1,1]!value1[`${values.value}`] && (value1[`${values.value}`] = spanCount)if(spanCount>(value1[`${values.value}`]-1)){return [spanCount,1]}else if (rowIndex > 0 &&tableData[rowIndex - 1][column.property] === row[column.property]) {return [0, 0];}}
}

二、Element-Plus 中Table表格的列合并（进阶版）

1.效果图如下

2. DOM结构 如下

<div><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /><el-table-column prop="amount1" label="Amount 1" /><el-table-column prop="amount2" label="Amount 2" /><el-table-column prop="amount3" label="Amount 3" /></el-table></div>

3. TypeScript代码如下

interface User {id: stringname: stringamount1: stringamount2: stringamount3: number
}interface SpanMethodProps {row: Usercolumn: TableColumnCtx<User>rowIndex: numbercolumnIndex: number
}const values =ref("")
let str = ""
const value1 =reactive({})
const objectSpanMethod = ({row,column,rowIndex,columnIndex,
}: SpanMethodProps) => {if(columnIndex == 0 || columnIndex == 1){let spanCount = 1;// 从当前行往下找for (let i = rowIndex + 1 ; i < tableData.length; i++) {if (tableData[i][column.property] === row[column.property]) {spanCount++;str =  row[column.property]} else {break;}}console.log(rowIndex,9999,spanCount === 1 && !value1[`${str}`])if(spanCount === 1 && !value1[`${str}`])   return [1,1]!value1[`${str}`] && (value1[`${str}`] = spanCount)if(spanCount>(value1[`${str}`]-1)){console.log(rowIndex,`行 -${value1[`${str}`]}  列`,columnIndex,"列-相同值",spanCount,value1,"执行次数--值",str)return [spanCount,1]
}else if (rowIndex > 0 &&tableData[rowIndex - 1][column.property] === row[column.property]) {console.log("",tableData[rowIndex - 1][column.property],row[column.property])return [0, 0];}}
}

二、Element-Plus 中Table表格的列合并（最终优化版）

1. TypeScript代码如下

/* 下面的方法(脑力精髓-简洁-代码量极少)*/
interface TableKeyTypes {eximType: stringdndFeeType: stringperiod: string"20GP": string"40GP": string"40HQ": stringcurrency: string[key: string]: string;
}interface SpanMethodProps {row: TableKeyTypescolumn: Record<"property", keyof TableKeyTypes>rowIndex: numbercolumnIndex: number
}
// prohibit modify to ref (超负载)
let str = ""
const stroageValue:Record<string, string|number> = reactive({})
// colspan all from the same value
const colSpanMethod = ({row,column,rowIndex,columnIndex
}: SpanMethodProps) => {if (columnIndex == 0 || columnIndex == 1) {let spanCount = 1// 从当前行往下找for (let i = rowIndex + 1; i < colSpanTableData.value.length; i++) {if (colSpanTableData.value[i][`${column.property}`] === row[`${column.property}`]) {spanCount++str = row[`${column.property}`]} else {break}}if (spanCount === 1 && !stroageValue[`${str}`]) return [1, 1]!stroageValue[`${str}`] && (stroageValue[`${str}`] = spanCount)if (spanCount > ((stroageValue[`${str}`] as number) - 1)) {return [spanCount, 1]} else if (rowIndex > 0 && colSpanTableData.value[rowIndex - 1][`${column.property}`] === row[`${column.property}`]) {return [0, 0]}}
}

---

总结

提示：直接拿去Element-Plus去测试代码。已经上线过的功能，

希望可以帮助到你们 💪💪💪，一起加油