【AntDesign Table】表格-可选择表格，选择框可隐藏

需求：表格中的checkbox有三种状态：隐藏、禁用、可选。

原本是希望AntDesign中存在相应的option来配置隐藏checkbox，但没找到。只有在rowSelection里通过设置getCheckboxProps的相关属性配置。

既然无法直接在渲染列表时就决定隐藏和显示，

那就换个思路：等列表渲染完成后，再去隐藏checkbox。

问题：如何找到列表中需要隐藏的checkbox呢？

我的思路就是：

通过getCheckboxProps给需要隐藏的checkbox加个隐藏标志，然后列表渲染完后，通过操作dom，给相应的元素加个样式隐藏掉。

相关实现：

1、给要隐藏的checkbox，设置它的name为‘disabled’

private getCheckboxProps(record: any) {
    return {
      props: {
        name: !record.isAuthority ? 'disabled' : '',
        disabled: record.isDisabled || !record.isAuthority
      }
    }
  }

2、然后再操作dom，给它个隐藏样式

private hiddenCheckbox() {
    const displayCheckboxList = document.getElementsByName('disabled')
    displayCheckboxList.forEach((item: any) => {
      item.parentNode.parentNode.parentNode.className = item.className + ' hidden'
    })
  }

你会发现，怎么这么搞笑，要去往上找3层父级呢。

是因为，如果只是隐藏了这个初始状态的checkbox，当你点击全选的时候，这个checkbox是会再次出现的，并且是勾选状态的。

（因为点击全选，antDesign会重新赋值类名，如果hidden加在这层就会被覆盖掉了）

所以我就直接往上，把父级给隐藏掉。

但其实这个都是蠢办法，讲道理可以更快捷的，就是：

     在getCheckboxProps里把它给禁用掉再隐藏，那你页面中的任何操作都不会算进这个checkbox了。

这个实现也还挺简单的。