Table 表格--分页序号自增

最新推荐文章于 2024-07-11 15:29:37 发布

是只蓝胖子呀~

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量112

点赞数 4

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/qq_48691693/article/details/140260299

版权

代码：

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 (
        <Table
            columns={columns}
            dataSource={data}
            pagination={{ current: currentPage, pageSize: pageSize }}
            onChange={(pagination) => {
                setCurrentPage(pagination.current as number);
            }}
        />
    );
};

export default App;

结果：