Ant-Design之Table表单

使用前需要先下载antd，这里的示例代码通过react实现。
写这篇博文算是对学习过程的一个总结，详细学习可到官网看详细文档
传送门：Table表单

import React, { Component } from 'react'
import { Table, Button } from 'antd'

const { Column } = Table
const data = [
    {
        key: "1",
        firstName: '姓名1',
        secondName: '姓名2',
        thirdName: '姓名2',
        forthName: '姓名4'
    },
    {
        key: "2",
        firstName: '姓名1',
        secondName: '姓名2',
        thirdName: '姓名2',
        forthName: '姓名4'
    },
    {
        key: "3",
        firstName: '姓名1',
        secondName: '姓名2',
        thirdName: '姓名2',
        forthName: '姓名4'
    }
]
export default class NavList extends Component {
    render() {
        return (
            <div>
                <Table dataSource={data}>
                    <Column title="标题一" dataIndex='firstName' key="first"></Column>
                    <Column title="标题二" dataIndex="secondName" key="second"></Column>
                    <Column title="标题三" dataIndex="thirdName" key="third"></Column>
                    <Column title="标题四" dataIndex="forthName" key="forth" render={(text, record, index) => {
                        console.log(text,record,index)
                        return (
                            <Button.Group>
                                <Button>{record.firstName}</Button>
                                <Button>{record.secondName}</Button>
                                <Button>{record.thirdName}</Button>
                                <Button>{record.forthName}</Button>
                            </Button.Group>
                        )
                    }}></Column>
                </Table>
            </div>
        )
    }
}

运行截图：

官方解释：

注意点：
1、

2、

3、

总结一句话，在表单中如果想对当前行数据进行操作可以考虑使用render属性，如删除、修改、查看当前行数据