antd-etable

const data = [
{id:1,name:'测试1',title:'哈哈',status:0,desc:'描述1描述1描述1描述1',type:0,created_time:'2019-5-2'},
{id:2,name:'测试2',title:'呵呵',status:1,desc:'描述2描述2描述2描述2',type:1,created_time:'2019-5-3'},
{id:3,name:'测试3',title:'嘻嘻',status:2,desc:'描述3描述3描述3描述3',type:0,created_time:'2019-5-4'}
];
const type = ['类型一','类型二'];
const status = ['正常','异常','停止'];
const cols = [
{
title: '名称',
dataIndex: 'name',
editable:true,
editor: {
required: true,
},
},
{
title: '类型',
dataIndex: 'type',
editable:true,
editor: {
type: 'select',
options: [
{key: 1, value: '类型一'},
{key: 2, value: '类型二'},
]
},
render: (text, record) => (
type[text]
),
},
{
title: '日期',
dataIndex: 'created_time',
editable:true,
editor: {
type: 'datetime'
}
},
];
const allCols = [
...cols.slice(0,2),
{
title: '标题',
dataIndex: 'title',
editable:true,
width: 120,
},
...cols.slice(2),
{
title: '状态',
dataIndex: 'status',
editable:true,
width: 120,
editor: {
type: 'select',
options: status.map((value,key) => ({key,value}))
},
render: (text, record) => (
status[text]
),
}
];
export default function() {
const [changedData,setChangedData] = useState([]);
const fetch = (pager,filter,sorter) => {
// Do Remote Fetch
};
return (

###### 事件
| 名称 | 描述 | 参数 | 返回值 |
|:---|:---|:---:|:---:|
| canEdit | 每行是否可编辑 | record | Boolean |
| canRemove | 每行是否可删除 | record | Boolean |
| beforeEdit | 编辑数据前触发 | 无 | 无 |
| afterEdit | 编辑数据后触发 | 无 | 无 |
| onAdd | 新增数据的默认对象 | 无 | Object |
| onFetch | 请求数据事件 | pager,filter,sorter | 无 |
| onChangedDataUpdate | 更新数据变化时触发 | arr | 无 |
| onSelectRow | 每页记录数 | rows | 无 |
| onDownload | 每页记录数 | filter,sorter | 无 |
| onExpandedRow | 展开一行时触发 | record | 无 |

###### 方法
| 名称 | 描述 | 参数 | 返回值 |
|:---|:---|:---:|:---:|
| resetTable | 重置表格页码 | 无 | 无 |

Config