Tabulator：删除行时如何修改本地数组？

你碰到的这个情况我之前也遇到过——Tabulator自带的buttonCross按钮删除行时，默认只是更新表格的视觉展示，不会自动修改你本地的tabledata数组。不过有两种简单的方法能解决这个同步问题：

方法一：用reactiveData自动同步（推荐） #

你已经在表格配置里加了reactiveData: true，这个选项本来就是用来让表格和数据源双向绑定的，理论上删除行时应该自动同步更新tabledata。可能是你调用删除的方式需要微调一下，把cell.getRow().delete()换成下面的写法试试：

cellClick: function (e, cell) {
    // 获取当前行对应的数据对象
    const targetRow = cell.getRow().getData();
    // 调用表格的deleteRow方法，传入数据对象来触发数据源同步
    table.deleteRow(targetRow);
}

这样操作后，tabledata数组会自动移除对应的对象，因为reactiveData会监听表格的行删除事件，自动同步修改你的原始数据源。

方法二：手动过滤原始数组 #

如果第一种方法因为版本或者其他原因不生效，咱们可以手动处理：获取要删除的行数据，然后过滤tabledata数组：

cellClick: function (e, cell) {
    const targetRowData = cell.getRow().getData();
    // 过滤掉数组中匹配的对象
    tabledata = tabledata.filter(item => item !== targetRowData);
    // 如果需要强制表格刷新（开启reactiveData的话这步通常不需要）
    // table.setData(tabledata);
    // 最后删除表格行
    cell.getRow().delete();
}

这种方式更直接，通过对象引用对比找到要删除的条目，更新原始数组后再处理表格视图。

小提示 #

• 确保你的Tabulator版本是v4.0及以上，reactiveData是从这个版本开始支持的
• 如果你的数据对象有唯一标识（比如给每个对象加个id字段），用ID来过滤会比引用对比更可靠，比如：

  tabledata = tabledata.filter(item => item.id !== targetRowData.id);
  

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