如何实现DataGrid点击单元格时禁用整行选中仅复选框勾选选行

开发者阿泽

2026-8-27

实现方法

完全可以实现，核心逻辑就是屏蔽默认的点击单元格触发行选中的行为，只保留复选框列的选中触发能力，不同技术栈的DataGrid实现逻辑基本通用：

先关闭默认的点击行选中能力
绝大多数成熟的DataGrid组件都提供了直接的配置项来关闭这个默认行为：
- React生态常用的MUI X DataGrid：直接给组件传入disableRowSelectionOnClick={true}，就能直接屏蔽点击任意单元格触发整行选中的效果
- WPF原生DataGrid：可以给DataGridRow增加预览鼠标按下事件，判断点击源不是复选框时直接拦截选中事件，参考代码：
```
private void DataGridRow_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    DependencyObject clickSource = e.OriginalSource as DependencyObject;
    // 向上遍历视觉树，判断点击位置是否落在复选框上
    while (clickSource != null && clickSource is not CheckBox)
    {
        clickSource = VisualTreeHelper.GetParent(clickSource);
    }
    // 点击位置不是复选框时，阻止默认的行选中逻辑
    if (clickSource == null)
    {
        e.Handled = true;
    }
}
```
- Vue/React生态的Ant Design、Element Plus类组件：关闭点击行选中相关配置（比如Antd Table的rowSelection.clickRowSelect设为false，Element Plus Table的highlight-current-row设为false、关闭行点击选中配置）即可
单独绑定复选框列的选中逻辑
关掉默认选中行为后，不要依赖组件自带复选框列的默认选中关联，给复选框单独绑定变更事件，点击时手动调用组件暴露的行选中API，把当前行的唯一标识加入/移出选中值列表，就能实现只有勾选复选框才选中对应行的效果。