index.tsx
2.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React, { useState } from 'react';
import { Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import * as commonUtils from '@/utils/utils';
import style from './index.less';
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface PropsType {
data: TableProps['dataSource'];
headerColumn: TableProps['columns'];
}
const TableNew: React.FC<PropsType> = (props) => {
const tableProps = {
columns: TableHeader(props),
dataSource: TableData(props),
scroll: {
// x: 'max-content',
y: '100%',
},
};
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
console.log('selectedRowKeys changed: ', newSelectedRowKeys);
setSelectedRowKeys(newSelectedRowKeys);
};
const rowSelection: TableRowSelection<TableProps> = {
selectedRowKeys,
onChange: onSelectChange,
};
return (
<div className={style.tableNew}>
<Table<TableProps> {...tableProps} bordered rowSelection={rowSelection} />
</div>
);
};
// 处理数据
const TableData = (props: PropsType): PropsType['data'] => {
const { data = [] } = props;
if (data && data.length) {
data.forEach((x, i) => {
x.key = i
})
}
return data;
}
// 处理表头
const TableHeader = (props: PropsType): PropsType['headerColumn'] => {
const { headerColumn = [], data = [] } = props;
return headerColumn.map((colunm) => {
colunm.ellipsis = true;
// colunm.textWrap = 'word-break',
if (!('dataIndex' in colunm)) return colunm;
const { dataIndex } = colunm;
if (dataIndex === 'sPartNameStatus') {
interface TextJsonItem {
sProcessName: string;
sState: number;
}
return {
...colunm,
render: (text: string, record: object) => {
const textJson: TextJsonItem[] = commonUtils.convertStrToObj(text.replace(",]", ']'), []) as TextJsonItem[];
console.log('=====xxx', text, textJson);
return textJson.map(item => item.sProcessName).join('->');
},
};
}
return colunm;
});
}
export default TableNew;