表格自定义单元格icon能否支持多个icon🙏

lin-hfy commented 4 months ago

🏷 Version

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

Sheet Type

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

🖋 Description

表格单元格自定义icon能否支持多个icon，目前好像一个单元格只能显示一个icon？

我们的需求：使用tooltip给单元格添加备注信息我们期望能提供单元格右上角添加tag，如下：

--忽略蓝色箭头

查阅文档后发现自定义单元格icon有许多存在限制的点：只提供数值左右的icon，icon数量只能一个

目前希望自定义单元格icon可以支持多个icon，有余力的话也希望可以支持图中类似单元格角标的功能

🏞 What problem does this feature solve

🧐 Suggest the API

name	type	default	description
-	-	-	-

github-actions[bot] commented 4 months ago

你好 @lin-hfy，请编辑你的 issue 标题, 一个言简意赅的 issue 标题可以节省大家的时间, 请不要将标题当做正文, 或者为空。

Hello, @lin-hfy, please edit your issue title. a concise issue title will save everyone time. please do not leave the title as the body or empty.

lijinke666 commented 4 months ago

自定义icon能否支持多个icon

你指的 [自定义 icon] 是行列头 (headerActionIcons) 还是字段标记 (conditions) ? 前者是支持的, 字段标记确实不支持, 会考虑在 2.0 版本中迭代 (增加多个 icon 和自定义 position 的能力), 目前的方案可以参考下文.

期望能提供单元格右上角添加tag

表格是 Canvas, 目前你可以自定义 DataCell, 然后自己在右上角绘制一个 icon 或者一个图形, 数值左右绘制多个 icon 也可以通过这种方式.

import { PivotSheet, DataCell, renderIcon } from '@antv/s2';

class CustomDataCell extends DataCell {
  initCell() {
    super.initCell()

    this.drawIcon()
  }

  drawIcon() {
    const { width, height, x, y } = this.meta
    const size = 12

    // 当前文本宽度 this.actualTextWidth, 你可以结合 meta 计算坐标自行绘制多个 icon
    if(this.meta.fieldValue === 7789) {
      const icon = renderIcon(this, {
        x: width - size,
        y: y,
        // 内置或者通过 customSVGIcons 注册的 icon 名
        name: 'Plus',
        width: size,
        height: size,
        fill: 'red'
      })

      icon.on('click', () => {
        console.log('...')
      })
    }
  }
}

antvis / S2