如何以编程方式移除Tabulator表格中的自定义操作按钮

解决方案 #

你的代码逻辑本身没问题，核心问题有两个：

1. Tabulator的updateData方法是异步执行的，返回Promise对象，需要等数据更新完成后再触发单元格重绘
2. 自定义formatter默认不会在数据更新后自动重新执行，需要主动调用对应单元格的reformat方法触发渲染
   另外你原来用字符串拼接返回DOM加href="javascript:"的写法存在函数作用域问题，容易出现函数未定义的报错，更稳妥的写法是直接创建DOM元素绑定点击事件，完整修改后的actButton函数如下：

var actButton = (cell, params, onRendered) => {                        
    const rowData = cell.getRow().getData();
    // 已完成的行直接返回空，隐藏按钮
    if (rowData.completed_at !== null) {
        return "";
    }
    // 直接创建DOM绑定事件，避免全局作用域冲突
    const link = document.createElement('a');
    link.setAttribute('data-toggle', 'tooltip');
    link.setAttribute('title', 'Execute');
    link.innerHTML = `<i class='fas fa-camera' style='color:#9691ce;'></i>`;
    // 绑定点击事件
    link.addEventListener('click', () => {
        cell.getTable().updateData([
            { 
                id: rowData.id,
                completed_at: '2021-12-31 13:59:00',
                completed_by: 'Womble',
                completed_by_email: 'wimbledon@common.org.uk'
            }
        ]).then(() => {
            // 数据更新完成后重绘当前操作列单元格，自动执行formatter逻辑隐藏按钮
            cell.reformat();
        });
    });
    return link;
};

额外提醒：你当前Completed列的formatterParams里的inputFormat配置是YYYY_MM_DD HH:mm:ss，但你存储的时间格式是横杠分隔的YYYY-MM-DD HH:mm:ss，需要把inputFormat里的下划线改成横杠，否则时间会渲染为空。

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