代码：

import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useState } from 'react';interface DataType {key: string;name: string;age: number;address: string;tags: string[];
}const data: DataType[] = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',tags: ['loser'],},{key: '3',name: 'Joe Black',age: 32,address: 'Sydney No. 1 Lake Park',tags: ['cool', 'teacher'],},
];const App: React.FC = () => {const [currentPage, setCurrentPage] = useState<number>(1);const pageSize = 2;const columns: ColumnsType<DataType> = [{title: 'number',dataIndex: 'number',key: 'number',align: 'center',render: (e, elem, index) => {const currentStartIndex = (currentPage - 1) * pageSize + 1;const currentIndex = currentStartIndex + index;return currentIndex;},},{title: 'Name',dataIndex: 'name',key: 'name',render: (text) => <a>{text}</a>,},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},{title: 'Tags',key: 'tags',dataIndex: 'tags',render: (tags: string[]) => (<span>{tags.map((tag) => {let color = tag.length > 5 ? 'geekblue' : 'green';if (tag === 'loser') {color = 'volcano';}return (<Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>);})}</span>),},{title: 'Action',key: 'action',render: (_, record) => (<Space size="middle"><a>Invite {record.name}</a><a>Delete</a></Space>),},];return (<Tablecolumns={columns}dataSource={data}pagination={{ current: currentPage, pageSize: pageSize }}onChange={(pagination) => {setCurrentPage(pagination.current as number);}}/>);
};export default App;

结果： 

重点代码截图：