Tabulator调用addData添加表格数据时触发TypeError类型错误

错误触发原因 #

报错本质是执行时序问题：Tabulator实例初始化是异步流程，调用new Tabulator()创建实例时，组件不会同步完成内部状态初始化、DOM渲染、初始数据加载的全流程。如果在实例创建后立刻同步调用addData方法，此时组件内部存储行数据的状态对象还未完成赋值，读取内部数据数组的length属性时会拿到undefined，最终触发类型错误。

问题复现代码 #

<div id="testTable"></div>

<script>
    var tableData = [
        {id:1, fullName:"Billy Bob"},
        {id:2, fullName:"Mary May"}
    ];
    var tableData2 = [
        {id:3, fullName:"Bill Gates"},
        {id:4, fullName:"Mr. Jones"}
    ];

    let logsTable = new Tabulator("#testTable", {
        data: tableData,
        columns:[
            {title: "ID", field: "id"},
            {title: "Full Name", field: "fullName"}
            ]
    });
    // 初始化未完成就同步调用addData，触发报错
    logsTable.addData(tableData2);
</script>

可行解决方案 #

• 方案1（官方推荐）：监听表格的tableBuilt事件，确认组件完全初始化完成后，再在回调中执行数据追加操作：

let logsTable = new Tabulator("#testTable", {
    data: tableData,
    columns:[
        {title: "ID", field: "id"},
        {title: "Full Name", field: "fullName"}
    ]
});

// 表格初始化完成后再执行追加操作
logsTable.on("tableBuilt", function(){
    logsTable.addData(tableData2);
});

• 方案2：如果不需要等初始化完成后动态触发数据加载，可以直接将两份数据合并后作为初始数据传入配置，省去后续调用addData的步骤：

let logsTable = new Tabulator("#testTable", {
    // 合并两份数据作为初始数据源
    data: tableData.concat(tableData2),
    columns:[
        {title: "ID", field: "id"},
        {title: "Full Name", field: "fullName"}
    ]
});

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