antd 表格checkbox全选

Question

如图，首次渲染数据是点击左侧单选按钮根据后台返回的值设置右侧多选框chechbox的默认值
后边的操作是 点击右侧的全选按钮，查看和编辑下边的多选框也对应联动 这是一个树结构列表
我看antd上边只有列全选，没有行全选 而我这个多选框是一行一行render出来的
这个要怎么处理

const columnsMenu = [
      {
        title: '菜单',
        key: 'NAME',
        dataIndex: 'NAME',
      },
      {
        title: '全部',
        key: 'AUTHORITY_ALL',
        dataIndex: 'AUTHORITY_ALL',
        render: (text, record) => (<Checkbox onChange={this.handleCheckbox} checked={record.AUTHORITY_ALL} value={record.ID} />),
      },
      {
        title: '查看权限',
        key: 'AUTHORITY_CHECK',
        dataIndex: 'AUTHORITY_CHECK',
        render: (text, record) => (<Checkbox onChange={this.handleCheckbox} checked={record.AUTHORITY_CHECK} value={record.ID} />),
      },
      {
        title: '编辑权限',
        key: 'AUTHORITY_EDIT',
        dataIndex: 'AUTHORITY_EDIT',
        render: (text, record) => (<Checkbox onChange={this.handleCheckbox} checked={record.AUTHORITY_EDIT} value={record.ID} />),
      },
    ];

  handleCheckbox=(e) => {
    console.log(`checked = ${e.target.checked}`, e.target.value);
    
    ......
  }

Answer 1

在行中的每个check都要记录在dataSource中。

• columus

const columnsMenu = [
      {
        title: '菜单',
        key: 'NAME',
        dataIndex: 'NAME',
      },
      {
        title: '全部',
        key: 'AUTHORITY_ALL',
        dataIndex: 'AUTHORITY_ALL',
        render: (text, record) => (<Checkbox onChange={(e) => this.handleCheckbox(e.target.checked, 'AUTHORITY_ALL', record.ID)} checked={record.AUTHORITY_ALL} value={record.ID} />),
      },
      {
        title: '查看权限',
        key: 'AUTHORITY_CHECK',
        dataIndex: 'AUTHORITY_CHECK',
        render: (text, record) => (<Checkbox onChange={(e) => this.handleCheckbox(e.target.checked, 'AUTHORITY_CHECK', record.ID)} checked={record.AUTHORITY_CHECK} value={record.ID} />),
      },
      {
        title: '编辑权限',
        key: 'AUTHORITY_EDIT',
        dataIndex: 'AUTHORITY_EDIT',
        render: (text, record) => (<Checkbox onChange={(e) => this.handleCheckbox(e.target.checked, 'AUTHORITY_EDIT', record.ID)} checked={record.AUTHORITY_EDIT} value={record.ID} />),
      },
    ];

• handleCheckbox

handleCheckbox(checked, type, id) {
    let {dataSource} = this.props;
    dataSource = dataSource.map(data => {
        if(data.ID === id) {
            data[type] = checked;
            if(type === 'AUTHORITY_ALL') {
                data['AUTHORITY_EDIT'] = checked;
                data['AUTHORITY_CHECK'] = checked;
            } else {
                data['AUTHORITY_ALL'] = data['AUTHORITY_EDIT'] && data['AUTHORITY_CHECK'];
            }
        }
        return data;
    });
    
    dispatch({type: 'xxxx', dataSource});
}

Answer 2

.handleCheckbox(e.target.checked, 'AUTHORITY_CHECK', record.ID)} checked={record.AUTHORITY_CHECK} value={record.ID}

 checked值绑定了 无法修改选中不选中 是什么问题呢？？
 
 value改为defaultValue可以实现选中  但是全选 没起效果