element的table合并单元格
就element+中的el-table中的span-method方法的使用和遇到的一些问题
如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个单元格设置为 0,0,不然会被推走
<template>
<div>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%"
>
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="amount1" sortable label="Amount 1" />
<el-table-column prop="amount2" sortable label="Amount 2" />
<el-table-column prop="amount3" sortable label="Amount 3" />
</el-table>
<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>
</template>
<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'
interface User {
id: string
name: string
amount1: string
amount2: string
amount3: number
}
interface SpanMethodProps {
row: User
column: TableColumnCtx<User>
rowIndex: number
columnIndex: number
}
const arraySpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return { //这里表示,单前单元格和后一列的单元格合并
rowspan: 1,
colspan: 2,
}
}
else { //返回11表示此单元显示
return {
rowspan: 1,
colspan: 1,
}
}
}else if(columnIndex === 1){
if (rowIndex % 2 === 0) {
return { //返回00表示此单元格移出
rowspan: 0,
colspan: 0,
}
}
else {
return {
rowspan: 1,
colspan: 1,
}
}
}
}
const tableData: User[] = [
{
id: '合计',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10,
},
{
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12,
},
{
id: '合计',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9,
},
{
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17,
},
{
id: '合计',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15,
},
]
</script>