antd表格 行内可选择和输入

Ant Design (antd) 提供了一个名为 Table 的组件，用于展示数据列表，并支持行内操作，包括选择和编辑。要实现在表格中的行内选择和输入，你可以这样做：

1. **行内选择**:
- 使用 `Selection` API：`<Table selection={{ type: 'radio' | 'checkbox', onChange: yourCallback }}>...</Table>`，这会提供单选或多选功能。`yourCallback` 是处理选中状态变化的函数。
- `type` 属性可以设置为 `'radio'` 或 `'checkbox'`，分别对应单选和多选。

2. **行内编辑**:
- 使用 `onRow` 和 `columns` 配置：在列配置里添加 `editable` 属性，同时在 `onRow` 中处理单元格的编辑事件，如保存、取消等操作。

   <Table
     onRow={(record, index) => ({
       // 返回一个包含事件处理函数的对象，这里演示如何编辑
       onCell: ({ record, dataIndex, editing }) => ({
         render: () => editing ? (
           <Input value={record[dataIndex]} onChange={(e) => handleEdit(record, dataIndex, e.target.value)} />
         ) : record[dataIndex],
         // 这里的handleEdit是实际的编辑处理函数
         onCellClick: () => {
           // 开始编辑
           this.editing = true;
           console.log('开始编辑', dataIndex);
         },
         afterSave: (record, result) => {
           // 编辑完成后更新数据
           console.log('已保存', record, result);
           if (result.success) {
             this.editing = false; // 结束编辑
           }
         },
         afterCancel: () => {
           // 取消编辑
           console.log('已取消', dataIndex);
           this.editing = false;
         },
       })}
     />}
   />

`handleEdit` 是处理单元格值改变的回调函数。