S2React 基础明细表，将第一列每行添加icon，此时如何对icon定义onClick事件？

[yxr70]

您好：
首先非常感谢S2团队，因为您们给我们提供了十分强大的S2。
现有个问题需要帮助
s2-react.min.js 版本：2.2.2
s2.min.js 版本：2.4.3
场景： 基础明细表方式中，第一列每行添加了 自定义icon ，此时使用 onActionIconClick 事件都不起作用，请问如何 实现点击列中icon触发相应事件？

代码及注释
const s2DataCfg = { fields: { columns:['包号','项目单位','需求单位','项目名称'], meta:[ {field:'包号',name'包号',}, {field:'项目单位',name'项目单位',}, {field:'需求单位',name'需求单位',}, {field:''项目名称',name''项目名称',}, ], }, data, }; const s2Options = { width: 1200, height: 1000, customSVGIcons: [ { name: 'CustomIcon', // 1. 字符串（支持自定义颜色） src:



`,

  // 2. 本地文件（支持自定义颜色，本质上也是字符串）
  },
],
conditions: {
  icon: [
    {
      field: '包号',
      position: 'left',
      mapping(fieldValue, data) {
        return {
          // 使用自定义 icon 名称
          icon: 'CustomIcon',
          // 自定义颜色 （在线链接不支持）
          fill: '#30BF78',
        };
      },        
    },
    
  ],
},

};

const S2table = ()=>{
return (

<SheetComponent
dataCfg={s2DataCfg}
options={s2Options}
sheetType="table"
onActionIconClick={event => {
const { cell, iconName } = event;
console.log('iconName:', iconName);
console.log('当前行数据:', cell.getMeta().data);
}}
/>

);
};

ReactDOM.render(<S2table / >, document.getElementById("excel"))
`

[github-actions[bot]]

@yxr70 您好！以下是关于您问题的自动回复：

您好，感谢您的详细描述和代码！

问题分析

您在 S2React 基础明细表（表格模式）中，通过 conditions.icon 给每行的第一列添加了自定义 icon，但发现 onActionIconClick 事件没有生效，无法捕捉到 icon 的点击。

其实，conditions.icon 只是用于展示自定义图标，但这些图标本身不是“操作 icon”（即不会自动绑定操作事件）。要实现 icon 可点击并响应事件，需要用 S2 的 headerActionIcons 配置（或相关 API）。

---

正确做法：让 icon 支持点击事件

1. 使用 headerActionIcons 配置

您需要在 s2Options 里增加 headerActionIcons，并指定 icon 名称、位置以及点击回调：

const s2Options = {
  ...原有配置,
  customSVGIcons: [
    {
      name: 'CustomIcon',
      src: `...您的SVG...`
    },
  ],
  headerActionIcons: [
    {
      icons: [{ name: 'CustomIcon', position: 'left' }], // 指定图标和位置
      belongsCell: ['rowCell'], // 第一列属于 rowCell
      displayCondition: (meta, iconName) => {
        // meta.colIndex === 0 只在第一列显示
        return meta.colIndex === 0;
      },
      defaultHide: false, // 始终显示
      // 点击事件
      onClick: ({ iconName, meta, event }) => {
        console.log('点击icon:', iconName, meta, event);
        // 可在此处理业务逻辑，比如弹窗、跳转等
      }
    }
  ],
};

2. SheetComponent 事件绑定（可选）

您也可以继续在组件上绑定 onActionIconClick，但如果用 headerActionIcons 的 onClick，通常不需要组件级事件了。

---

完整代码示例

简化并重点突出 icon 可点击：

const s2Options = {
  width: 1200,
  height: 1000,
  customSVGIcons: [
    {
      name: 'CustomIcon',
      src: `...您的SVG...`,
    },
  ],
  headerActionIcons: [
    {
      icons: [{ name: 'CustomIcon', position: 'left' }],
      belongsCell: ['rowCell'],
      displayCondition: (meta) => meta.colIndex === 0, // 只在第一列显示
      defaultHide: false,
      onClick: ({ iconName, meta, event }) => {
        // meta.data 即为当前行数据
        console.log('iconName:', iconName);
        console.log('当前行数据:', meta.data);
        // 这里可以做弹窗、菜单、跳转等操作
      }
    }
  ],
};

const S2table = () => (
  <SheetComponent
    dataCfg={s2DataCfg}
    options={s2Options}
    sheetType="table"
  />
);

---

其他注意事项

• conditions.icon 仅用于展示，不带点击事件。操作 icon 需用 headerActionIcons。
• belongsCell: ['rowCell'] 表示行头（即左侧第一列）；如需其他列可调整。
• displayCondition 可自定义只让特定列/行/数据展示。
• icon 的点击事件回调参数 meta.data 即为当前行数据，便于后续处理。

---

总结

您遇到的问题是因为 conditions.icon 只做展示，不做交互。请改用 headerActionIcons 配置自定义操作 icon，并设置 onClick 回调，即可实现点击 icon 响应事件。

如需更复杂的菜单、tooltip，可结合 S2 的 tooltip API 实现。

---

参考文档

• 自定义操作 icon API
• headerActionIcons 配置说明
• React 表格集成示例

---

如还有疑问，欢迎补充具体需求或报错信息！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[Alexzjt]

自定义单元格，参考下面的代码：

/**
 * 在明细表第一列添加可点击 icon 的示例
 *
 * 通过自定义 DataCell，在单元格中添加可响应点击事件的 icon
 *
 * @see https://s2.antv.antgroup.com/examples/custom/custom-shape-and-chart/#custom-g-shape
 */

import {
  GuiIcon,
  TableDataCell,
  type S2DataConfig,
  type S2Options,
  type SpreadSheet,
  type ViewMeta,
} from '@antv/s2';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';
import React from 'react';
import { createRoot } from 'react-dom/client';

// 测试数据
const data = [
  { id: 1, name: '项目A', unit: '单位1', type: '类型1' },
  { id: 2, name: '项目B', unit: '单位2', type: '类型2' },
  { id: 3, name: '项目C', unit: '单位3', type: '类型3' },
  { id: 4, name: '项目D', unit: '单位4', type: '类型4' },
  { id: 5, name: '项目E', unit: '单位5', type: '类型5' },
];

const dataCfg: S2DataConfig = {
  fields: {
    columns: ['id', 'name', 'unit', 'type'],
  },
  meta: [
    { field: 'id', name: '编号' },
    { field: 'name', name: '名称' },
    { field: 'unit', name: '单位' },
    { field: 'type', name: '类型' },
  ],
  data,
};

// 自定义 SVG 图标
const customIconSvg = `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/><path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"/></svg>`;

/**
 * 自定义 DataCell，在第一列添加可点击的 icon
 */
class CustomTableDataCell extends TableDataCell {
  private customIcon: GuiIcon | null = null;

  initCell() {
    super.initCell();
    this.drawCustomIcon();
  }

  drawCustomIcon() {
    // 只在第一列（colIndex === 0）绘制 icon
    if (this.meta.colIndex !== 0) {
      return;
    }

    const { x, y, height } = this.meta;
    const iconSize = 16;
    const iconX = x + 4;
    const iconY = y + (height - iconSize) / 2;

    this.customIcon = new GuiIcon({
      name: 'CustomIcon',
      x: iconX,
      y: iconY,
      width: iconSize,
      height: iconSize,
      fill: '#30BF78',
      cursor: 'pointer',
    });

    // 绑定点击事件
    this.customIcon.addEventListener('click', (event) => {
      console.log('icon 被点击, 当前行数据:', this.meta.data);
      alert(`点击了第 ${this.meta.rowIndex + 1} 行的 icon`);
      event.stopPropagation();
    });

    this.appendChild(this.customIcon);
  }

  // 重写获取文本位置，为 icon 预留空间
  protected getTextPosition() {
    const position = super.getTextPosition();

    if (this.meta.colIndex === 0) {
      position.x += 24;
    }

    return position;
  }
}

const s2Options: S2Options = {
  width: 600,
  height: 400,
  customSVGIcons: [
    {
      name: 'CustomIcon',
      src: customIconSvg,
    },
  ],
  dataCell: (viewMeta: ViewMeta, spreadsheet: SpreadSheet) => {
    return new CustomTableDataCell(viewMeta, spreadsheet);
  },
};

function App() {
  return (
    <SheetComponent
      dataCfg={dataCfg}
      options={s2Options}
      sheetType="table"
    />
  );
}

createRoot(document.getElementById('root')!).render(<App />);