Vue3组合式API下Tabulator复选框勾选无法触发事件问题

开发环境与核心代码 #

基于 Vue3 Composition API、Tabulator 5.2.7 版本开发数据表格功能，省略无关逻辑后的核心代码如下：

<!-- DataTable.vue -->
<script setup>
import { TabulatorFull as Tabulator } from 'tabulator-tables';
import { useDataStore } from '@/stores/DataStore.vue';
import { ref, reactive, onMounted } from 'vue';

const store = useDataStore(); // 从状态管理获取表格数据

// 按Tabulator官方Vue集成示例定义响应式变量
const table = ref(null);
const tabulator = ref(null);
const tableData = reactive(store.getData);

onMounted(() => {
  tabulator.value = new Tabulator(table.value, {
    layout: "fitDataTable",
    data: tableData,
    reactiveLayout: true,
    responsiveLayout: true,
    selectable: 1, // 配置为单行选中模式
    columns: [
      {
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        headerSort: false,
        cellClick: function(e, cell) {
          const r = cell.getRow();
          console.log(r._row.data);
        }
      }
      // 其余业务列均为常规标题、字段映射配置，已省略
    ]
  })
});

// 按社区建议尝试绑定行点击事件
tabulator.value.on('rowClick', function(e, row) {
  console.log('hello world')
})

// 以下写法尝试后无效，已注释
// tabulator.on('rowClick', function(e, row) {
//   console.log('hello world')
// })
</script>

<template>
  <div ref="table"></div>
</template>

功能效果参考示意图：

预期效果 #

点击行首的选择复选框（图中红色标注区域）时，控制台可打印对应行的完整数据，后续将基于此扩展自定义业务逻辑。

实际问题表现 #

• 点击行单元格非复选框区域（图中绿色标注区域）时，可正常触发绑定逻辑、完成行选中
• 点击复选框本身时，仅能触发默认的行选中效果，无法触发控制台打印或自定义绑定的函数

已尝试排查方案 #

• 参考官方文档绑定事件监听器与回调函数，但调用.on()方法（例如绑定双击行事件：table.on("rowDblClick", () => {return 1})）时，会抛出table.on is not a function错误，已知Tabulator 5.0版本后移除了部分旧版行事件监听器
• 直接在rowSelection选择列配置中添加cellClick回调，点击复选框时回调不会触发
• 在Tabulator实例初始化完成后，调用tabulator.value.on()绑定rowClick事件，同样未生效

选型说明：前期技术调研阶段，Vuetify对Vue3的适配仍处于Beta阶段，因此选择Tabulator作为表格组件方案。
可接受方案范围：只要能让Tabulator内置事件监听器或rowClick回调参数正常生效即可。

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