蚂蚁金服-antd-Table（2）

最新推荐文章于 2023-01-17 20:25:12 发布

tianxia1202

最新推荐文章于 2023-01-17 20:25:12 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：蚂蚁金服-antd-Table

本文链接：https://blog.youkuaiyun.com/tianxia1202/article/details/78998756

蚂蚁金服-antd-Table 专栏收录该内容

6 篇文章

订阅专栏

本文详细探讨了蚂蚁金服Ant Design中的Table组件，包括其核心特性、使用方法和常见应用场景。通过对组件API的分析，展示了如何自定义列、实现数据筛选、排序及分页功能，帮助开发者更好地理解和运用这一强大的表格组件。


import React,{ Component} from 'react';
import { Table, Icon, Divider } from 'antd';

const { Column,ColumnGroup  } = Table;
const dataSource = [{
    key: 1,
    firstName: '小小',
    lastName: '天下',
    age: 22,
    address: '北京市'
},{
    key: 2,
    firstName: '美丽',
    lastName: '可爱',
    age: 21,
    address: '上海市',
},{
    key: 3,
    firstName: '雪花',
    lastName: '弥漫',
    age: 18,
    address: '甘肃省'
}]

class TabCheckBox  extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {
        return(
            <div>
                <Table  dataSource={ dataSource}>
                    <ColumnGroup title='Name'>
                        <Column
                            title='first Name'
                            dataIndex="firstName"
                            key="firstName"
                        />
                        <Column
                            title='last Name'
                            dataIndex='lastName'
                            key="lastName"
                        />
                    </ColumnGroup>
                    <Column
                        title="Age"
                        dataIndex="age"
                        key="age"
                    />
                    <Column
                        title="Address"
                        dataIndex="address"
                        key="address"
                    />
                    <Column
                        title="Action"
                        dataIndex="action"
                        key="action"
                        render={(text,record)=>(
                            <span>
                                <a href="#">Action 一 {record.name}</a>
                                <Divider type="vertical" />
                                <a href="#">Delete</a>
                                <Divider type="vertical" />
                                <a href="#" className="ant-dropdown-link">
                                    More actions <Icon type="down" />
                                </a>
                            </span>
                        )}
                    />
                </Table>
            </div>
        )
    }
}
export default TabCheckBox