如题,自定义的数据结构大概长这样
interface MyLabel { key: string; name: string; color?: string; } interface MyData { id: React.Key, group: number, category: number state: number, keyword: string, create_at: number, edit_at: number, author?: string, level?: number, labels?: MyLabel[]; }
因为要做可编辑除了默认的类型还会有 render, filter...
,现在的 column 类型大概是这样的
{ title: string, dataIndex: string, editable: boolean, filters?: undefined, filterSearch?: undefined, onFilter?: undefined, render?: undefined, ellipsis?: undefined, sorter?: undefined, }
然后 ts 检查就会告诉我
... not assignable to type ColumnType<MyData> | ColumnGroupType<MyData>
直接给 column 赋类型 ColumnsType<MyData>
也是不行的,有点迷茫不知道要怎么改了,官网教程也没说
同时 render 的时候,默认的类型应该是 string | number | undefined
, 实际上是个枚举,但直接给枚举类型也是报错的,用断言 as number
也是不行的
有没有好兄弟分享下经验的,这种时候应该怎么定义类型?
附上完整的 Column 定义
const edit_tabel_column = [ { title: 'level', dataIndex: 'level', editable: true, }, { title: 'group', dataIndex: 'group', editable: true, filters: [ { text: "Blacklist", value: CleanGroup.Blacklist }, { text: "Whitelist", value: CleanGroup.Whitelist } ], filterSearch: false, onFilter: (value: CleanGroup, record: any) => record.group === value, render: (value: CleanGroup) => ( <SelectCell group={value}/> ), }, { title: 'category', dataIndex: 'category', editable: true, filters: [ { text: 'Quick Access', value: CleanCategory.QuickAccess, }, { text: 'Frequent Folder', value: CleanCategory.FrequentFolders, }, { text: 'Recent File', value: CleanCategory.RecentFiles, }, ], filterSearch: false, onFilter: (value: CleanCategory, record: any) => record.category === value, render: (value: CleanCategory) => ( <SelectCell category={value}/> ), }, { title: 'state', dataIndex: 'state', editable: true, filters: [ { text: 'enabled', value: CleanState.Enabled }, { text: 'disabled', value: CleanState.Disabled } ], filterSearch: false, onFilter: (value: CleanState, record: any) => record.state === value, render: (value: CleanState) => ( <SelectCell badge state={value}/> ), }, { title: 'keyword', dataIndex: 'keyword', editable: true, ellipsis: { showTitle: false, }, }, { title: 'create_at', dataIndex: 'create_at', ellipsis: { showTitle: false, }, editable: false, sorter: (a: any, b: any) => a.create_at - b.create_at, render: (create_at: number) => ( <Tooltip title={time.get_date_string_from_timestamp(create_at, "YYYY-MM-DD")} placement='top'> {time.get_date_string_from_timestamp(create_at, "YYYY-MM-DD")} </Tooltip> ), }, { title: 'edit_at', dataIndex: 'edit_at', ellipsis: { showTitle: false, }, editable: false, sorter: (a: any, b: any) => a.edit_at - b.edit_at, render: (edit_at: number) => ( <Tooltip title={time.get_date_string_from_timestamp(edit_at, "YYYY-MM-DD")}> {time.get_date_string_from_timestamp(edit_at, "YYYY-MM-DD")} </Tooltip> ), }, { title: 'operation', dataIndex: 'operation', render: (_: any, record: MyData) => { const editable = isEditing(record); return editable ? ( <span> <Typography.Link OnClick={() => saveEditingRow(record.id)} style={{ marginRight: 8 }}> {'save'} </Typography.Link> <Popconfirm title={'sure to cancel?')} OnConfirm={cancelEditTableRow}> <a>{'cancel'}</a> </Popconfirm> </span> ) : ( <div> <Typography.Link disabled={editingKey !== ''} OnClick={() => editTableRow(record)}> {'edit'} </Typography.Link> <Divider type="vertical" /> <Typography.Link disabled={editingKey !== ''} OnClick={() => removeRow(record)}> {'delete'} </Typography.Link> </div> ); }, } ] const mergedEditColumns = edit_tabel_column.map((col) => { if (!col.editable) { return col; } return { ...col, onCell: (record: MyData) => ({ record, inputType: col.dataIndex, dataIndex: col.dataIndex, title: col.title, editing: isEditing(record), }), }; })