🐛链接跳转自定义标记无法同步获取到node的belogsCell

[liqiuqiui]

🏷 Version

Package	Version
@antv/s2	2.0.0-next.28
@antv/s2-react
@antv/s2-vue

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

按照官网demo代码，自定义标记无法同步获取到node的belogsCell去实现标记只对数值生效

🔗 Reproduce Link

将下列代码粘贴覆盖到官网自定义标记demo代码框里

import { S2DataConfig, S2Event, S2Options, TableSheet } from "@antv/s2";

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

    const s2Options: S2Options = {
      width: 600,
      height: 480,
      interaction: {
        linkFields: (meta) => {

          if (meta.value === '商品类别') {
            console.log("meta", meta);
            console.log("belongsCell", meta?.belongsCell);
          }
          // 不标记列头
          if (meta?.belongsCell?.cellType === "colCell") {
            return false;
          }

          return true;
          // 根据指标值动态标记
          // return meta?.fieldValue === "浙江" || meta?.fieldValue >= 10;
        },
      },
    };

    const s2 = new TableSheet(container, s2DataConfig, s2Options);

    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (jumpData) => {
      console.log("jumpData:", jumpData);

      const { field, record } = jumpData;
      const value = record?.[field];
      const a = document.createElement("a");

      a.target = "_blank";
      a.href = `https://s2.antv.antgroup.com/zh/docs/manual/introduction?${field}=${value}`;
      a.click();
      a.remove();
    });

    await s2.render();
  });

😊 Expected Behavior

😅 Current Behavior

[lijinke666]

无法同步获取到node的belogsCell

S2/packages/s2-core/src/facet/header/col.ts

Lines 80 to 91 in c35bc03

	protected appendNode(node: Node) {
	const { spreadsheet } = this.getHeaderConfig();
	const group = this.getCellGroup(node);
	const cell = this.getCellInstance(node);
	node.belongsCell = cell;
	group?.appendChild(cell);
	spreadsheet.emit(S2Event.COL_CELL_RENDER, cell as ColCell);
	spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
	}

belogsCell 是在节点生成后才写入的, 也就是 lineFields 调用之后, 所以是无法获取的, 这个 demo 有问题, 后续优化, 感谢你的反馈

实现标记只对数值生效

你可以换种方式, linkFields 这个 hook 会对所有单元格调用, 但是:

数值单元格的数据结构和其他不同, 对应 ViewMeta , 其他单元格对应 Node, 你如果只想对数值生效, 可以根据两者结构差异来判断, 例如:

import { Node } from '@antv/s2'

if(meta instanceof Node) {
 // 表头
} else {
 // 数值
}

if(!meta.valueField) {
 // 表头
} else {
 // 数值
}