多选框

使用内置扩展

CheckboxCell

自行实现

通过 customCell 和 customHeaderCell 配置项来自定义实现多选框功能。这种方式非常灵活，可以满足不同的业务需求。

示例

loading

代码实现

在 columns 配置中添加一个自定义列，用于显示复选框：

{
    customHeaderCell: () => (
        <span>
            <input
                type="checkbox"
                style={{ verticalAlign: 'middle' }}
                checked={isCheckAll}
                ref={el => {
                    if (el) el.indeterminate = isCheckPartial;
                }}
                onChange={e => toggleAll(e.target.checked)}
            />
        </span>
    ),
    customCell: ({ row }) => (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <input type="checkbox" checked={!!row._isChecked} onChange={e => toggleRow(row.id, e.target.checked)} />
        </div>
    ),
}

input元素外面加一层父元素，为了垂直居中。

您可以根据项目中使用的React组件库(Ant Design, Material UI, Chakra UI,等)中的Checkbox组件来替代input实现多选框, 以保持项目整体样式统一。