自定义节点，默认 maxLines 1，可以根据手动展开后的文本高度，自动调整 row 行高度吗

[simplejason]

目的：期望字段级列节点，实现展开收起能力，收起状态默认 maxLine 1 的省略号，展开设置 maxLines 999 全量换行展示
操作步骤：

• 自定义 DataCell 节点，添加展开收起 icon
• 点击展开后，设置 data cell maxLines 999
• 此时，文本正常从省略号变成全量展示，但是行高还是维持默认的 30
  目前 extends DataCell 有方法可以自动更新行高等自适应列高吗？

[github-actions[bot]]

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

您好，感谢您的详细描述！针对 “自定义节点，默认 maxLines 1，可以根据手动展开后的文本高度，自动调整 row 行高度吗” 的需求，下面为您梳理解决思路及实现建议。

---

1️⃣ 实现自定义 DataCell 展开/收起图标

• 思路：通过自定义 DataCell 的渲染逻辑，添加展开/收起 icon，点击后切换 maxLines。
• 实现方式：
  • 扩展 DataCell 类，重写 drawTextShape，根据状态（展开/收起）控制 maxLines。
  • 使用 s2Options.dataCell 回调，将自定义 cell 应用于目标字段。
  • 注册自定义 SVG 图标并在 cell 中渲染。

参考代码：

import { DataCell } from '@antv/s2';

class ExpandableDataCell extends DataCell {
  drawTextShape() {
    // 判断当前是否展开，根据 props 或 meta 标识
    const isExpanded = this.spreadsheet.store.get('expand-row-' + this.meta.rowIndex);
    const maxLines = isExpanded ? Infinity : 1;

    this.textShape = this.addShape('text', {
      attrs: {
        text: this.getText(),
        ...this.getTextStyle(),
        // 控制最大显示行数
        maxLines,
        wordWrap: true,
        textOverflow: 'ellipsis',
      },
    });

    // 添加展开/收起 icon，监听点击
    this.addShape('image', {
      attrs: {
        x: ...,
        y: ...,
        img: isExpanded ? collapseIcon : expandIcon,
        cursor: 'pointer',
      },
      name: 'expand-icon',
    }).on('click', () => {
      this.spreadsheet.store.set('expand-row-' + this.meta.rowIndex, !isExpanded);
      this.spreadsheet.render(false); // 重新渲染
    });
  }
}

// 在 s2Options 里指定自定义 cell
const s2Options = {
  dataCell: (meta, s2) => new ExpandableDataCell(meta, s2),
  // 注册 icon
  customSVGIcons: [
    { name: 'expand', src: '...' },
    { name: 'collapse', src: '...' },
  ],
};

---

2️⃣ 行高自适应文本高度方案

• S2 默认行为：行高不会因为文本展开自动变化，需手动调整。
• 推荐做法：
  • 在展开时，计算文本实际高度（可用 text metrics 或预估行数）。
  • 使用 heightByField 配置或 rowCell.height 回调动态调整对应行高。
  • 触发 layoutResizeRowHeight 事件或调用相关 API，刷新行高。

参考代码：

const s2Options = {
  style: {
    rowCell: {
      heightByField: {
        // 例如：根据某行是否展开设置高度
        [rowIndex]: isExpanded ? computedHeight : defaultHeight,
      },
      // 或者用 height 回调
      height: (rowNode) => {
        const isExpanded = ... // 判断标记
        return isExpanded ? computedHeight : 30;
      }
    }
  }
};

注意：computedHeight 需根据文本内容和字体行高动态计算。

---

3️⃣ 切换 maxLines 参数，控制文本显示

• maxLines 设置：
  • 收起时：maxLines: 1, textOverflow: 'ellipsis'
  • 展开时：maxLines: Infinity 或大于文本实际行数，wordWrap: true
• 配置方式：在 cell 渲染时传递不同的 maxLines。

参考代码：

const cellTextWordWrapStyle = {
  maxLines: isExpanded ? Infinity : 1,
  wordWrap: true,
  textOverflow: 'ellipsis',
};

const s2Options = {
  style: {
    dataCell: cellTextWordWrapStyle
  }
};

---

🔗 总结步骤

1. 自定义 DataCell，实现展开/收起逻辑及 icon。
2. 切换 maxLines，控制文本多行展示或省略号。
3. 动态调整行高，在展开时设置对应行高为文本实际高度。

---

⚡️ 注意事项

• 行高自适应需与 maxLines 状态同步；建议每次展开/收起都刷新行高配置。
• 推荐使用 S2 的 rowCell.heightByField 或 height 回调实现动态行高。
• 复杂场景可结合 S2 的事件（如 layoutResizeRowHeight）和 store 标识，确保 UI 状态一致。

---

如需完整代码样例或遇到具体实现障碍，欢迎补充问题或提供更多细节！

---

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