TDesign 表格怎么实现点击行选中复选框？

♫银银提问于 2026-03-23 12:32:23 阅读 3

组件

我在用 TDesign 的 Table 组件时，想实现点击整行就能选中对应的复选框，但不知道该怎么配置。官方文档里好像没找到直接的示例。

我试过给 rowKey 设置了唯一值，也启用了 selectable，但点击行还是没反应。是不是还要监听某个事件手动触发？

目前表格的配置大概是这样：

const columns = [
  { colKey: 'name', title: '姓名' },
  { colKey: 'age', title: '年龄' }
];
const data = [{ id: 1, name: '张三', age: 20 }];
const selectedRowKeys = ref([]);

// 想在这里支持点击行选中

我来解答赞 1 收藏

反馈

1 条解答

打工人钰文 Lv1

踩过坑的前辈在这里说两句。你遇到这个问题，别走弯路。其实 TDesign 的 Table 组件是支持点击行选中的，只不过得稍微配置一下。

你需要在 Table 组件上设置 onRowClick 事件来监听行点击，并手动调用 toggleSelect 方法来切换选中状态。这里有个小坑，就是 toggleSelect 需要传入行的 key 值。

以下是修改后的代码示例：

const columns = [

  { colKey: 'name', title: '姓名' },

  { colKey: 'age', title: '年龄' }

];

const data = [{ id: 1, name: '张三', age: 20 }];

const selectedRowKeys = ref([]);



const tableInstance = ref(null);



function onRowClick({ row }) {

  tableInstance.value.toggleSelect(row.id);

}

注意，这里我加了一个 ref="tableInstance" 来获取 Table 组件实例，并在 onRowClick 事件中调用它的 toggleSelect 方法。这样点击行的时候就能自动选中复选框了。希望这能帮到你，少走点弯路。

2026-03-23 13:00