<think>好的，用户现在想在
Arco Design的Table组件中
实现点击行选中
功能。我之前已经回答过如何修改隔行颜色，现在需要处理行选中。首先，我需要回忆一下
Arco Design的文档，看看他们有没有内置的行选中
功能或者相关的事件。
用户之前的问题是关于隔行颜色，现在转向交互
功能，可能需要用到事件处理和状态管理。根据用户提供的引用，特别是引用[1]和[2]，里面提到了Ant
Design Vue和Element Plus的选中处理，可能可以参考类似的逻辑，但需要适配到
Arco Design的API。
首先，
Arco的Table组件是否有rowSelection属性？或者是否需要手动处理选中状态？可能需要使用selectedKeys和事件监听。比如，当用户点击某一行时，触发
一个事件，更新选中的行keys。
然后，考虑示例代码的结构。用户可能需要
一个Vue 3的示例，因为之前的回答提到了
Vue 3和
ArcoDesign。需要展示如何绑定点击事件，如何跟踪选中的行，以及如何高亮选中的行。
另外，用户可能希望点击行时切换选中状态，支持多选或单选。需要确定用户的需求，但通常示例可能先展示单选，然后扩展多选。根据引用[1]，Ant
Design是通过rowSelection对象管理选中的keys，可能
Arco也有类似的方式。
需要检查
Arco Design的Table组件文档，看是否有row-class-name或类似的属性来动态添加选中行的样式。或者，是否需要通过CSS来高亮选中的行，比如使用
.selected-row类，并在点击时切换该类。
还要考虑性能问题，比如大量数据时选中状态的响应速度。不过示例代码可能不需要涉及优化部分，保持简单即可。
最后，确保代码正确，包括
Vue 3的响应式语法，比如使用ref和reactive，以及在模板中正确绑定事件和属性。可能还需要处理行点击事件，更新选中的keys数组，并通过动态类名应用样式。
总结步骤：
1
. 使用@row-click事件捕获行点击事件。
2
. 维护
一个selectedRowKeys数组来存储选中的行key。
3. 在行点击时，切换该行key在数组中的存在状态。
4
. 使用:row-class-name根据是否选中来添加高亮样式。
5
. 提供示例代码，包括模板和脚本部分，展示如何
实现单选和多选。
6
. 添加注意事项，比如key的唯一性，以及可能需要的样式调整。</think>在
Arco Design 的 Table 组件中
实现点击行选中
功能，可通过 **行点击事件绑定 + 状态控制**
实现。以下是
Vue 3 + TypeScript 的完整
实现方案：
---
### 方案一：基础行点击选中（单选/多选）
```html
<template>
<a-table
:data="tableData"
:row-key="(record) => record
.id"
:row-selection="rowSelection"
@row-click="handleRowClick"
>
<!-- 列定义 -->
<a-table-column title="姓名" data-index="name"></a-table-column>
<a-table-column title="年龄" data-index="age"></a-table-column>
</a-table>
</template>
<script setup lang="ts">
import { ref } from &#
39;
vue&#
39;;
// 表格数据
const tableData = ref([
{ id: 1, name: &#
39;张三&#
39;, age: 25 },
{ id: 2, name: &#
39;李四&#
39;, age:
30 }
]);
// 选中状态控制
const selectedKeys = ref<(string | number)[]>([]);
// 行选择配置
const rowSelection = ref({
type: &#
39;checkbox&#
39;, // 或 &#
39;radio&#
39; 单选
selectedRowKeys: selectedKeys,
onChange: (keys: (string | number)[]) => {
selectedKeys
.value = keys;
}
});
// 行点击事件
const handleRowClick = (record: any) => {
const key = record
.id;
const index = selectedKeys
.value
.indexOf(key);
if (index === -1) {
selectedKeys
.value
.push(key); // 添加选中
} else {
selectedKeys
.value
.splice(index, 1); // 取消选中
}
};
</script>
<style>
/* 选中行高亮样式 */
.arco-table-tr-selected {
background-color: #e6f4ff !important;
}
</style>
```
---
### 方案二：进阶版（动态类名 + 禁用默认复选框）
```html
<template>
<a-table
:data="tableData"
:row-class-name="getRowClassName"
@row-click="handleRowClick"
>
<!-- 隐藏默认复选框 -->
<template #columns>
<a-table-column title="姓名" data-index="name"></a-table-column>
<a-table-column title="年龄" data-index="age"></a-table-column>
</template>
</a-table>
</template>
<script setup lang="ts">
import { ref } from &#
39;
vue&#
39;;
const tableData = ref([
...]); // 同上
const selectedKeys = ref<(string | number)[]>([]);
// 动态行类名
const getRowClassName = ({ record }: { record: any }) => {
return selectedKeys
.value
.includes(record
.id) ? &#
39;selected-row&#
39; : &#
39;&#
39;;
};
// 点击切换选中状态
const handleRowClick = (record: any) => {
const key = record
.id;
selectedKeys
.value = selectedKeys
.value
.includes(key)
? selectedKeys
.value
.filter(k => k !== key)
: [
...selectedKeys
.value, key];
};
</script>
<style>
/* 自定义选中样式 */
.selected-row {
background-color: var(--color-primary-light-1) !important;
transition: background-color 0
.3s;
}
/* 隐藏默认复选框 */
.arco-table-selection-col {
display: none;
}
</style>
```
---
#### 关键
实现点：
1
. **行标识**：必须通过 `row-key` 指定唯一标识字段（如 `id`）
2
. **状态同步**：通过 `selectedRowKeys` 同步选中状态[^1]
3. **样式覆盖**：使用 `!important` 覆盖组件默认样式[^2]
4
. **事件穿透**：直接使用 `@row-click` 事件而非单元格点击事件
---
### 效果验证：
1
. 点击行时检查 `selectedKeys` 数组变化
2
. 使用开发者工具查看行元素是否添加了 `
arco-table-tr-selected` 类名
3. 多选场景可通过 `Ctrl/Command + 点击`
实现（需额外处理）
---
最低0.47元/天 解锁文章
扫一扫
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
