如何在 Tabulator 表格中正确渲染单元格中的超链接文本

当将已有 HTML 表格（含 <a> 标签）转换为 Tabulator 实例时，默认会将 <a> 的 outerHTML 作为纯文本显示；需通过 rowFormatter 手动提取并重写单元格内容，确保超链接可点击且仅显示锚文本。

当将已有 html 表格（含 `` 标签）转换为 tabulator 实例时，默认会将 `` 的 outerhtml 作为纯文本显示；需通过 `rowformatter` 手动提取并重写单元格内容，确保超链接可点击且仅显示锚文本。

Tabulator 在解析原始 HTML 表格时，默认将 <td> 的完整 innerHTML（包括 <a> 标签）作为字符串值读取，导致链接被转义为不可交互的文本。要还原超链接功能，关键在于绕过默认值解析逻辑，直接操作 DOM 元素。

推荐使用 rowFormatter 回调函数，在每行渲染完成后，遍历目标列单元格，将其 DOM 内容替换为原始 <a> 标签的 innerHTML（即可见文本），同时保留 href 属性以维持跳转能力。但注意：col.getValue() 返回的是 Tabulator 解析后的字符串值（含标签），而我们需要的是原始 <a> 元素本身——更稳健的做法是直接从原始 <td> 中提取 <a> 并安全注入。

✅ 正确实现方式如下（适配任意列、支持多链接）：

let table = new Tabulator("#table", {  rowFormatter: function(row) {    // 获取该行所有单元格    const cells = row.getCells();    // 假设第 0 列（column 1）含超链接，可按需调整索引或遍历所有列    const targetCell = cells[0];    const cellEl = targetCell.getElement();    const tdEl = cellEl.querySelector("td"); // 定位原始 td    if (tdEl) {      const linkEl = tdEl.querySelector("a");      if (linkEl) {        // 安全地复用原 <a> 元素（保留 href、target 等属性）        cellEl.innerHTML = "";        cellEl.appendChild(linkEl.cloneNode(true));      }    }  }});

⚠️ 注意事项：

• 避免 XSS 风险：若 <a> 标签来自不可信来源，切勿直接使用 innerHTML = linkEl.outerHTML；应白名单过滤 href、target 等属性。
• 列索引灵活性：如需对多列应用，可用 cells.forEach(cell => { ... }) 并结合 cell.getColumn().getField() 判断字段名。
• 性能考虑：rowFormatter 在每次重绘时触发，建议仅处理必要列，避免高频 DOM 操作。
• 替代方案（推荐用于新数据）：若可控数据源，优先使用 formatter: "html" + 自定义 formatterParams 构建链接，语义更清晰、维护性更强。

总结：Tabulator 不自动解析嵌套 HTML 标签为可交互元素，必须通过 rowFormatter 主动接管渲染逻辑。核心思路是——不依赖 getValue()，而是从原始 DOM 提取并复用 <a> 元素，既保留样式与行为，又规避转义问题。