React Tabulator嵌套表格自定义子行十进制行号格式化方法

DevOps 小满

2026-7-18

React Tabulator 树形表格层级行号实现方案

要实现十进制对齐的层级行号（如1.1、2.1），可以通过自定义格式化函数，利用Tabulator提供的树形行API递归构建行号，替代默认的rownum格式化器。

核心思路

遍历当前行的所有父级节点，依次收集每个节点在同级列表中的位置索引（从1开始），最后将这些索引按层级顺序拼接成带小数点的行号。

具体实现

1. 定义自定义层级行号格式化函数

const hierarchyRowNumFormatter = (cell) => {
  const row = cell.getRow();
  const hierarchyNumbers = [];
  let currentRow = row;

  // 向上遍历所有父级节点，收集层级编号
  while (currentRow) {
    const parentRow = currentRow.getTreeParent();
    if (parentRow) {
      // 获取当前行在父级子节点中的位置（索引从1开始）
      const siblingRows = parentRow.getTreeChildren();
      const currentIndex = siblingRows.indexOf(currentRow) + 1;
      hierarchyNumbers.unshift(currentIndex);
    } else {
      // 根节点，获取在根行列表中的位置
      const rootRows = cell.getTable().getRows(true); // true 仅返回根节点行
      const currentIndex = rootRows.indexOf(currentRow) + 1;
      hierarchyNumbers.unshift(currentIndex);
    }
    currentRow = parentRow;
  }

  return hierarchyNumbers.join('.');
};

2. 在列配置中使用该格式化器

将自定义格式化器替换原来的rownum配置：

const columns = [
  {
    title: '层级行号',
    formatter: hierarchyRowNumFormatter,
    width: 120,
    frozen: true, // 可选：冻结行号列，方便滚动查看
  },
  // 其他列配置示例
  { title: '名称', field: 'name' },
  { title: '描述', field: 'desc' },
];