tdesign-vue-next icon indicating copy to clipboard operation
tdesign-vue-next copied to clipboard

[Table组件] rowspanAndColspan 合并未达到理想效果

Open linzhenjie opened this issue 3 years ago • 1 comments

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>

效果:两行合并 image

使用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>

期望结果

理想效果:行支持合并

image

实际结果

image

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

linzhenjie avatar Aug 25 '22 17:08 linzhenjie

期望+1

luoyu-233 avatar Aug 31 '22 02:08 luoyu-233

新的示例代码: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: '操作' },
    ]"
image

chaishi avatar Sep 26 '22 12:09 chaishi