Element 的Table表格实现列合并(记得先排序、element-plus、列合并、线上已投入使用)
系列文章目录
提示:当前的功能已经投入项目中使用了,不要担心回发生什么问题!!!代码有问题直接私信我就好👌
文章目录
- 系列文章目录
- 背景如下
- 一、Element-Plus 中Table表格的列合并(初版)
- 1.效果图如下
- 2. DOM结构 如下
- 3.TypeScript代码如下
- 二、Element-Plus 中Table表格的列合并(进阶版)
- 1.效果图如下
- 2. DOM结构 如下
- 3. TypeScript代码如下
- 二、Element-Plus 中Table表格的列合并(最终优化版)
- 1. TypeScript代码如下
- 总结
背景如下
需求是
1、服务与不同的船公司,分别有进出口的分类
2、希望对相同业务,价格,进行列合并
3.、一句话:合并前几列相同的列,只要数据相同就可以合并
提示:以下是本篇文章正文内容,下面案例可供参考
一、Element-Plus 中Table表格的列合并(初版)
1.效果图如下
2. DOM结构 如下
<div>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="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: string
name: string
amount1: string
amount2: string
amount3: number
}
interface SpanMethodProps {
row: User
column: TableColumnCtx<User>
rowIndex: number
columnIndex: 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"
border
style="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: string
name: string
amount1: string
amount2: string
amount3: number
}
interface SpanMethodProps {
row: User
column: TableColumnCtx<User>
rowIndex: number
columnIndex: 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: string
dndFeeType: string
period: string
"20GP": string
"40GP": string
"40HQ": string
currency: string
[key: string]: string;
}
interface SpanMethodProps {
row: TableKeyTypes
column: Record<"property", keyof TableKeyTypes>
rowIndex: number
columnIndex: 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去测试代码。已经上线过的功能,
希望可以帮助到你们 💪💪💪,一起加油