hm-react-cli/template/app/src/components/Table.js

Create a Huimei React project by module

/*
 * @Author: zhang peng
 * @Date: 2021-11-16 10:46:43
 * @LastEditTime: 2021-11-26 10:36:32
 * @LastEditors: zhang peng
 */
import { Table, Button } from 'antd';
import { useState, useEffect } from 'react';

const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: '40%'
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        width: '30%'
    },
    {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        width: '30%'
    }
];

const data = [
    {
        key: 1,
        name: 'a',
        age: 32,
        address: '我是a',
        children: [
            {
                key: 11,
                name: 'aa',
                age: 33,
                address: '我是aa'
            },
            {
                key: 12,
                name: 'ab',
                age: 33,
                address: '我是ab',
                children: [
                    {
                        key: 121,
                        name: 'aba',
                        age: 33,
                        address: '我是aba'
                    }
                ]
            },
            {
                key: 13,
                name: 'ac',
                age: 33,
                address: '我是ac',
                children: [
                    {
                        key: 131,
                        name: 'aca',
                        age: 33,
                        address: '我是aca',
                        children: [
                            {
                                key: 1311,
                                name: 'acaa',
                                age: 33,
                                address: '我是acaa'
                            },
                            {
                                key: 1312,
                                name: 'acab',
                                age: 33,
                                address: '我是acab'
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        key: 2,
        name: 'b',
        age: 32,
        address: '我是b'
    }
];

// 通过 rowSelection 对象表明需要行选择
const rowSelection = {
    onChange(selectedRowKeys, selectedRows) {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
    },
    onSelectAll(selected, selectedRows, changeRows) {
        console.log(selected, selectedRows, changeRows);
    }
};

export default function TableDeomo(props) {
    function onChange(pagination, filters, sorter) {
        // 点击分页、筛选、排序时触发
        console.log('各类参数是', pagination, filters, sorter);
    }

    return (
        <div>
            <Table columns={columns} rowSelection={rowSelection} dataSource={data} />
        </div>
    );
}