tdesign-vue-next
tdesign-vue-next copied to clipboard
[Table组件] rowspanAndColspan 合并未达到理想效果
tdesign-vue-next 版本
0.20.2
重现链接
https://stackblitz.com/edit/angular-qkwnyp?file=src/demo.vue
重现步骤
常规的hteml表格合并
<table>
<tr>
<td :rowspan="2">名称</td>
<td :colspan="3">合计</td>
<td :rowspan="2">操作</td>
</tr>
<tr>
<!--第二行名称注释-->
<td>a</td>
<td>b</td>
<td>c</td>
<!--第二行操作注释-->
</tr>
</table>
效果:两行合并

使用tdesign 实现不出来,rowspanAndColspan的逻辑不太了解
<template>
<t-table
row-key="id"
:columns="[
{ title: '名称', colKey: 'name' },
{
title: '合计',
colKey: 'sum',
children: [
{ title: '值1', colKey: 'a' },
{ title: '值2', colKey: 'b' },
{ title: '值3', colKey: 'c' },
],
},
{ title: '操作', colKey: 'action' },
]"
:data="[
{ id: 1, name: '测试', sum: 6, a: 1, b: 2, c: 3, action: '操作' },
{ id: 1, name: '测试', sum: 6, a: 1, b: 2, c: 3, action: '操作' },
]"
:rowspan-and-colspan="rowspanAndColspan"
>
</t-table>
</template>
<script lang="ts" setup>
const rowspanAndColspan = ({ col, rowIndex, colIndex }: any) => {
if (col.colKey === "a") {
return {
colspan: rowIndex % 2 === 0 ? 3 : 1, //合计首行合并,次行1
};
}
if (["b", "c"].includes(col.colKey)) {
return {
colspan: rowIndex % 2 === 0 ? 0 : 1, //首行不显示,次行1
};
}
if (rowIndex % 2 === 0) {
return {
rowspan: 2, //名称和操作两行
};
}
return {
colspan: 0, //隐藏不需要的行
};
}
</script>
期望结果
理想效果:行支持合并
实际结果
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
期望+1
新的示例代码:https://stackblitz.com/edit/angular-qkwnyp-hz52j2?file=src%2Fdemo.vue
请保证 id 的唯一,给出的数据,有两条数据的 id 重复,第二条数据 id 更为 2 即可。
:data="[
{ id: 1, name: '测试', sum: 6, a: 1, b: 2, c: 3, action: '操作' },
{ id: 2, name: '测试', sum: 6, a: 1, b: 2, c: 3, action: '操作' },
]"