Tabulator中rowSelection列头全选复选框点击时headerClick事件不触发如何解决

该现象不是框架Bug，是Tabulator内置rowSelection标题格式化器自带的全选复选框内部绑定了专属点击逻辑，且主动阻止了事件向上冒泡，避免与内置全选逻辑冲突，因此点击复选框区域时不会触发你绑定的headerClick事件，只有点击表头未被复选框覆盖的区域，事件才能正常冒泡触发回调。

• 方案1：使用全局行选择变更事件（最通用，覆盖所有选择场景）
  不管是点击行单选、表头全选、还是调用API修改选中状态，都会触发该事件，直接在回调中同步选中数据即可，无需修改原有列配置：

new Tabulator("#你的表格容器ID", {
  // 保留你原有的所有表格配置
  rowSelectionChanged: (selectedData, selectedRows) => {
    this.selectedRows = selectedRows;
    this.rowCount = selectedRows.length;
  }
})

• 方案2：使用表头选择切换专属事件（仅监听表头全选操作）
  如果只需要在点击表头全选/取消全选时触发逻辑，不需要监听单行选择的变化，可以绑定headerSelectionToggled事件：

// 初始化表格获取实例
const table = new Tabulator("#你的表格容器ID", {
  // 保留你原有的所有表格配置
})
// 绑定表头全选切换事件
table.on("headerSelectionToggled", (isAllSelected, affectedRows) => {
  this.selectedRows = table.getSelectedRows();
  this.rowCount = this.selectedRows.length;
})

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