如何在Tabulator的cellClick事件中修改Icon/Button列格式化器使用的图标

推荐使用基于数据状态绑定的方案，状态可持久化，适配表格排序、过滤、分页等重绘场景

方案1：数据状态绑定（推荐） #

• 首先定义列格式化器时，关联行数据的自定义状态字段判断展示的图标，示例代码如下：

// 文件夹列配置
{
  title: "资源目录",
  field: "folderName",
  formatter: function(cell) {
    // 读取行数据内的文件夹打开状态，默认未打开
    const isFolderOpen = cell.getRow().getData().isFolderOpen || false;
    // 可替换为你使用的图标库对应类名，这里以Font Awesome为例
    return `<i class="fa fa-${isFolderOpen ? 'folder-open' : 'folder'}"></i> ${cell.getValue()}`;
  }
}

• 然后在cellClick事件中修改对应行的状态字段，触发单元格自动重绘即可完成图标切换：

// 绑定表格cellClick事件
table.on("cellClick", function(e, cell) {
  // 仅处理文件夹列的点击事件，可替换为你自己的列字段判断逻辑
  if (cell.getColumn().getField() === "folderName") {
    const currentRow = cell.getRow();
    const rowData = currentRow.getData();
    // 翻转文件夹打开状态，更新行数据后表格会自动重绘对应单元格
    currentRow.update({
      isFolderOpen: !rowData.isFolderOpen
    });
  }
});

方案2：直接操作DOM（适合无需持久化状态的场景） #

如果仅需要临时切换图标，不需要保留状态到表格数据中，可以直接在点击事件中修改单元格内的图标元素类名：

table.on("cellClick", function(e, cell) {
  if (cell.getColumn().getField() === "folderName") {
    // 查找单元格内的图标元素
    const iconElement = cell.getElement().querySelector("i.fa-folder, i.fa-folder-open");
    if (iconElement) {
      // 切换两个图标的类名
      iconElement.classList.toggle("fa-folder");
      iconElement.classList.toggle("fa-folder-open");
    }
  }
});

注意：直接操作DOM的方式在表格触发重绘（排序、过滤、分页、刷新数据等操作）后，图标状态会重置为格式化器默认渲染的状态，需要持久化状态请选择方案1。

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