关于antd中Table里面的选择框

237 阅读1分钟

要实现的一个功能:对于不能勾选的项,直接不显示勾选框。

实现不能勾选

在rowSelection里面
getCheckboxProps该属性可以设置,根据每一项的属性控制哪些项的勾选框可以设置disabled
比如下面这样
const rowSelection = { 
getCheckboxProps: (record: DataType) => ({
disabled: record.name === 'Disabled User'
})
};

目前的需求是不让勾选框,经过查看checkbox的属性可以看到,并没有控制勾选框是否显示的属性,所以不从属性上面下手,从样式上进行修改,修改disabled的样式,让勾选框不显示。

//找到指定的dom下面,设置不能勾选的勾选框的样式
      .ant-checkbox-disabled .ant-checkbox-inner{
        display: none;
      }
//或者在getCheckboxProps里面设置样式,让符合条件的勾选框不显示。
getCheckboxProps: (record: DataType) => ({
 style: {
          record.name === 'Disabled User' ? 'none' : 'inline-block',
       }
})