antd Table 多选框动态控制：条件渲染与禁用策略实战

最新推荐文章于 2026-03-02 03:15:30 发布

原创

最新推荐文章于 2026-03-02 03:15:30 发布 · 620 阅读

1. 从业务痛点说起：为什么你的表格多选框需要“看人下菜碟”

做后台管理系统，表格几乎是标配，而表格里的多选框功能更是高频操作。但不知道你有没有遇到过这种尴尬：用户反馈说，为什么库存为零的商品还能被勾选加入购物车？或者，为什么没有审核权限的运营同学，也能看到并勾选“批量审核”的选项？这些问题，本质上都是因为表格的多选框“太笨了”，对所有数据一视同仁，没有根据业务状态进行动态调整。

我刚开始用 antd 的 Table 组件时，也踩过这个坑。记得当时做一个商品管理的需求，运营同学批量下架商品，结果把库存为零的也选上了，流程直接报错。排查了半天，才发现是前端没有对不可操作的数据进行限制。后来，我深入研究了 antd Table 的 rowSelection 配置，才发现它提供了非常灵活的动态控制能力，完全可以实现“条件渲染”和“动态禁用”。

简单来说，条件渲染就是“要不要显示这个选择框”，比如对没有权限的数据行，干脆不显示勾选框，从视觉上就杜绝误操作的可能。动态禁用则是“显示但不让点”，比如库存为零的商品，勾选框是灰色的，用户能看到但无法选择，体验上更友好，也能明确提示状态。这两种策略，分别对应了 renderCell 和 getCheckboxProps 这两个核心 API。接下来，我就结合自己趟过的坑和实战经验，带你彻底搞懂它们。

2. 核心武器库：认识 rowSelection 的关键配置

在动手写代码之前，我们得先把“武器”认全。antd Table 的多选框功能，主要通过 rowSelection 这个对象来控制。它功能强大，但参数也不少，我们聚焦在今天主题相关的几个关键属性上。

首先，你必须明确你使用的 antd 版本，这是第一个大坑！antd 4.x 和更早的 2.x 版本，在某些 API 上是有差异的。比如控制“全选”复选框显示的属性，在 2.x 版本里叫 hideDefaultSelections，而在 4.3.0 及以上版本，统一成了 hideSelectAll。如果你照着老教程写代码发现不生效，先别怀疑人生，检查一下版本号。

我们今天重点要用的两个函数是：

getCheckboxProps: (record) => object：这是实现“动态禁用”的主力。它为每一行的选择框生成额外的属性。我们最常用的就是返回一个 { disabled: true/false } 的对象，来禁用或启用某一行的复选框。它的参数是当前行的数据记录 record，这意味着我们可以根据这条数据的具体字段值（比如 inventory, status）来做判断。
renderCell: (checked, record, index, originNode) => ReactNode：这是实现“条件渲染”的核弹。它允许你完全自定义选择框单元格的渲染内容。你可以基于 record 进行判断，如果不想显示选择框，直接返回 null 或一个空标签；如果想显示，就返回原始的 originNode，或者你包装过的内容。这个函数在 antd 4.1.0 及以上版本提供支持。