【踩坑向】antd Table组件的 getCheckboxProps最近业务需求中基于 antd table组件，做了

前言

最近业务需求中基于 antd table组件，做了带勾选功能的表格。其中有个需求如下图，需要用到 getCheckboxProps，也对它有了深刻印象（坑），于是写下此文，与各位分享一下，以后大家需要用这个API时可以少走点弯路。全文阅读时间大概5分钟😉

想要子项筛选项，变成跟表格顶部的全选功能一致，区别如下：

点击“-”：子项所有表格会被选中点击“√”：子项所有表格会被全部取消（对比上一步，用户需要多点一次勾选框）

官方文档

我们先看看 antd Table 组件如何描述这个API

参数	说明	类型	默认值
getCheckboxProps	选择框的默认属性配置	Function(record)	-

是的，没看错，就这么一句话，小朋友你是否有很多问号？

我们先看看脑海中的一个个问号

它有什么用
返回什么
record 是什么
怎么用

解密 getCheckboxProps

我们按顺序一个个看问题

getCheckboxProps 作用

虽然这个 API 以 get 起名，但是网上更多是用于 set ，如图：

我本次需求也是将该 api 用于这种类似作用，因此我个人觉得称呼该 API 为 setCheckboxProps 或者 resetCheckboxProps 更为合适。

getCheckboxProps 返回

getCheckboxProps 应该返回一个对象，这里可能有人试过返回false/true布尔值，甚至是字符串，好像没有报错，页面也能正常用。但是为什么我说应该返回一个对象呢？我尝试返回了一个null值进去，会报以下错误。

可以看到，这个函数作用，有一块是需要读取我们 getCheckboxProps 返回值中的disabled属性。就是说，想要让这个函数有作用，应该返回一个object 。此处大胆猜想，作者应该在这个返回这个函数后，到接受这个函数值的地方，应该有类似以下代码的操作

// 假设将调用该函数得到的值是 data 
// 假设 data 被 checkBoxporps 所用
const newCheckBoxProps =  Object(
    {},
    checkBoxProps, 
    {...data, disabled: data.disabled, }
)

record 是什么

record 是一个只包含表格中编写列名的值，比如我们一个表格有 ABCD 4列，原数据有 ABCDEFG，record 只会有ABCD，加上一个该项的id值。

怎么用

看完上述的返回部分，可能大家会有新的疑问，那么 Object 中除了 disabled 还有啥属性应该返回？

我们现在可以再看回官方的描述 选择框的默认属性配置 ，结合样式，大胆猜想此选择框，不是指我们Table表格的筛选框，而是指 antd 中 checkBox 组件。

我们来看下 checkBox 组件中的文档

参数	说明	类型	默认值
autoFocus	自动获取焦点	boolean	false
checked	指定当前是否选中	boolean	false
defaultChecked	defaultChecked	boolean	false
disabled	失效状态	boolean	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	false
onChange	变化时回调函数	Function(e:Event)	-

我们尝试下，使用 indeterminate 来完成我们的需要

        const flag = 一系列业务逻辑判断
        if (!flag) {
            return { indeterminate: true };
        }
        return { disabled: false };

这时候，页面会变成这样

起码有效果，验证了我的想法，说明这里的 选择框的默认属性配置 就是指多选框中的各种属性。

然后我们再看看如何解决这个问题，我们先看看 indeterminate 状态下的多选框与我们上述状态下的两个Dom 有什么区别：

正常的版本

有问题的版本

可以发现，有问题的版本实际上多了一个选中状态样式，所以我们这边重新编写下，就能得到我们想要的效果~

        const flag = 一系列业务逻辑判断
        if (!flag) { // 如果不满足我业务逻辑 就是要 - 这种交互的勾选框
            return { indeterminate: true,checked: false };
        }
        return { disabled: false };