Tabulator 6.2使用autoColumns重复创建表格存在旧表头内存泄漏问题

问题核心是每次创建新Tabulator实例前，未销毁旧实例，导致旧实例的DOM元素、事件监听和列配置一直占用内存——哪怕你覆盖了变量ForecastTable，浏览器也不会自动回收这些残留资源。

正确处理步骤 #

在创建新实例前，先检查并销毁已存在的Tabulator实例：

// 先销毁旧实例（如果存在）
if (typeof ForecastTable !== 'undefined' && ForecastTable instanceof Tabulator) {
    ForecastTable.destroy();
}

// 再创建新实例
filtered_data = [
    {
        "category": "1_actual",
        "2015-09-01": 1,
        "2015-09-02": 2,
        "2015-09-03": 0,
        "2015-09-04": 1,
        "2015-09-05": 2,
    },
    {
        "category": "2_forecast",
        "2015-09-01": null,
        "2015-09-02": null,
        "2015-09-03": null,
        "2015-09-04": null,
        "2015-09-05": null,
        "2015-09-06": null,
    }
];

ForecastTable = new Tabulator('#forecastTable', {
    data: filtered_data,
    autoColumns: true,
    selectableRows: 1,
});

为什么replaceData和deleteColumn没用？ #

这两个方法是在现有实例上更新数据或删除列，但你每次都是直接创建全新的Tabulator实例，旧实例完全没有被清理，内存里会堆积所有过往实例的资源，自然无法解决泄漏问题。

优化建议（可选） #

如果只是更新数据和列结构，没必要每次都创建新实例，复用现有实例性能更优：

// 假设已创建过ForecastTable实例
ForecastTable.setData(filtered_data);
// 根据新数据重新生成自动列
ForecastTable.setColumns(Tabulator.prototype.autoColumns.generate(filtered_data));

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