如何在Tabulator JS中删除单行后自动刷新rownum行号？

看起来你用的是Tabulator表格库对吧？我之前也踩过这个坑——rownum格式化器是在初始渲染或数据加载时，根据行的当前索引生成行号的，但删除行之后，Tabulator不会自动重新计算所有行的索引并更新行号，得手动触发列的刷新操作。

具体修改方法 #

你只需要在删除行的cellClick回调里，删除完成后手动刷新行号对应的列就行。这里不需要维护no字段的值，因为rownum格式化器会自动根据行的位置重新计算序号：

// 修改后的Remove列配置
{
  title:"Remove",
  formatter:"buttonCross",
  width:40,
  align:"center",
  cellClick:function(e, cell){
    // 删除当前行
    cell.getRow().delete();
    // 获取表格实例
    const table = cell.getTable();
    // 只刷新行号列（指定列的field或title都可以）
    table.refreshColumns("no");
  }
}

为什么这样有效？ #

• rownum格式化器的本质是读取行在表格中的当前索引位置来生成数字，删除行后剩余行的索引会发生变化，但Tabulator不会自动重新执行格式化逻辑。
• refreshColumns("no")会强制Tabulator重新渲染指定列的所有单元格，这样每一行的rownum就会根据新的索引重新计算，行号就自动更新成连续的了。

额外优化（可选） #

如果你觉得刷新整列有点重，也可以遍历剩余行手动触发单元格刷新，但其实refreshColumns已经做了优化，只更新需要变化的内容，所以一般没必要。不过如果需要同步no字段的值，可以这么写：

cellClick:function(e, cell){
  cell.getRow().delete();
  const table = cell.getTable();
  // 获取所有剩余行，逐个更新行号并刷新单元格
  table.getRows().forEach((row, index) => {
    row.update({"no": index + 1}); 
    row.getCell("no").refresh();
  });
}

内容的提问来源于stack exchange，提问作者levi