本文详解如何配置 Tabulator 表格，使其默认禁用点击整行触发选择，仅允许用户通过内置复选框（rowSelection）进行多行选择，避免误触导致的意外选中或单选行为。
本文详解如何配置 tabulator 表格，使其默认禁用点击整行触发选择，仅允许用户通过内置复选框（`rowselection`）进行多行选择，避免误触导致的意外选中或单选行为。
在 Tabulator 中，selectable 选项控制行选择行为的触发方式。许多开发者误以为必须显式设置 selectable: false 才能“禁止点击单元格选中行”，但这样做反而会破坏复选框的多选逻辑——因为 Tabulator 在 selectable: false 模式下，会将 rowSelection 复选框退化为单选按钮（radio-like），导致新选中一行时自动取消前一行的选择。
正确做法是：完全省略 selectable 配置项（或显式设为 true），并配合 rowSelection 列使用。Tabulator 自 v5.0 起默认采用「仅复选框可触发选择」的安全策略：当表格包含 rowSelection 格式列时，即使 selectable: true（或未设置，默认为 true），点击非复选框区域（如姓名、年龄等单元格）不会触发行选择；只有点击复选框本身才会切换该行选中状态，且支持真正的多选（Ctrl/Cmd + 点击、Shift + 点击、全选等）。
以下是推荐的配置示例：
var tableDiv = document.querySelector("#tableDiv");
var tableData = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
var columnConfig = [
{
title: "",
formatter: "rowSelection",
titleFormatter: "rowSelection",
hozAlign: "center",
headerSort: false,
width: 40 // 建议固定宽度，提升视觉一致性
},
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];
var myTable = new Tabulator(tableDiv, {
data: tableData,
columns: columnConfig,
// ✅ 关键：不设置 selectable，或显式设为 true
// ❌ 错误：selectable: false → 导致复选框变为单选
});
注意事项：
- rowSelection 列必须同时配置 formatter 和 titleFormatter 为 "rowSelection"，否则表头复选框无法渲染；
- 若需自定义复选框行为（如禁用某行复选框），可通过 formatterParams 传入 disabled: true 或结合 rowFormatter 动态控制；
- 获取当前选中行请使用 myTable.getSelectedData()，返回数组；监听变化可用 table.on("rowSelectionChanged", (data, rows) => {...})；
- 如需禁用全选功能，可在 titleFormatter 列中移除 titleFormatter: "rowSelection"，仅保留单元格复选框。
综上，无需牺牲多选能力来换取选择安全性——Tabulator 的设计已兼顾二者。只需遵循默认行为，即可获得精准、可控、符合用户直觉的复选框驱动多行选择体验。
