🐛版本1.55.7，明细表设置表头分组后，第一个分组的边框显示有问题

liruidong1 commented 3 months ago

🏷 1.55.7

Package	Version
@antv/s2	1.55.7
@antv/s2-react
@antv/s2-vue

Sheet Type

[ ] PivotSheet
[x] TableSheet
[] GridAnalysisSheet
[ ] StrategySheet
[ ] EditableSheet

🖋 Description

明细表设置表头分组后，第一个分组的左侧的边框不显示

⌨️ Code Snapshots

import { TableSheet } from "@antv/s2";

fetch("https://assets.antv.antgroup.com/s2/basic-table-mode.json")
  .then((res) => res.json())
  .then((data) => {
    const container = document.getElementById("container");
    const s2DataConfig = {
      fields: {
        columns: [
          {
            key: "area",
            children: ["province", "city"]
          },
          "type",
          {
            key: "money",
            children: [{ key: "price" }]
          }
        ]
      },
      meta: [
        {
          field: "province",
          name: "省份"
        },
        {
          field: "city",
          name: "城市"
        },
        {
          field: "type",
          name: "商品类别"
        },
        {
          field: "price",
          name: "价格"
        },
        {
          field: "cost",
          name: "成本"
        },
        {
          field: "area",
          name: "位置"
        },
        {
          field: "money",
          name: "金额"
        }
      ],
      data
    };

    const s2Options = {
      width: 600,
      height: 480,
      showSeriesNumber: false // 关闭序号列
    };
    const s2 = new TableSheet(container, s2DataConfig, s2Options);

    s2.setTheme({
      colCell: {
        cell: {
          backgroundColor: "white"
        }
      }
    });

    s2.render();
  });

🔗 Reproduce Link

https://s2-v1.antv.antgroup.com/examples/basic/table/#table-column-group

🤔 Steps to Reproduce

将代码复制进官网的例子里就可以看到效果了

😊 Expected Behavior

希望第一个分组左侧的边框正常显示

😅 Current Behavior

第一个分组左侧的边框不显示

💻 System information

Environment	Info
System	macos sonoma 14.5
Browser	chrome 126.0.6478.127

liruidong1 commented 3 months ago

我们目前业务是基于其他开源产品做的，升级到2.0的话后续可能不好合并，想知道在1.0的版本上有没有什么写法可以修复这个问题

lijinke666 commented 3 months ago

这个是 bug, 不过由于边框相关的问题较多所以我们放在 2.0 统一重构修复了, 你这里遇到的场景是多列头没有绘制左边框

在 1.x 中, 临时方案可以这样手动补齐一下:

import { TableColCell, CellBorderPosition } from '@antv/s2';

class CustomColCell extends TableColCell {
  drawBorders() {
    const { options } = this.spreadsheet;

    this.drawHorizontalBorder();
    this.drawVerticalBorder(CellBorderPosition.RIGHT);

    if (
      !options.showSeriesNumber &&
      (this.meta.colIndex === 0 || this.meta.children[0]?.colIndex === 0)
    ) {
      this.drawVerticalBorder(CellBorderPosition.LEFT);
    }
  }
}

const s2Options = {
  colCell: (...args) => new CustomColCell(...args)
}

github-actions[bot] commented 3 months ago

你好 @liruidong1，该功能或缺陷已经在 2.0 next 版本 中支持或修复，next 版本目前处于内测中, 感谢你的支持与理解。

如有任何 2.0 版本 问题，请前往讨论区或查看文档, 抢先试用:

yarn add @antv/s2@next  # pnpm add @antv/s2@next
yarn add @antv/s2-react@next  # pnpm add @antv/s2-react@next
yarn add @antv/s2-vue@next  # pnpm add @antv/s2-vue@next

Hello, @liruidong1, This feature or flaw has been supported or fixed in 2.0 next version, next version is currently in private beta, thank you for your support and understanding.

Any 2.0 version issues, please go to discussion, or view docs, the first trial:

antvis / S2