参考:https://ant.design/components/table-cn/
1 Table实例
指定表格的数据源 dataSource
为一个数组。
按照 React 的规范,所有的组件数组必须绑定 key。在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果你的数据没有这个属性,务必使用 rowKey 来指定数据列的主键。
// 比如你的数据主键是 uid
<Table rowKey="uid" />;
// 或
<Table rowKey={record => record.uid} />;
index.tsx
import React,{useState,useEffect} from 'react';
import { Col, Dropdown, Icon, Menu, Row, Table } from 'antd';
class TestZhou extends React.Component {
render() {
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
return (
<Table dataSource={dataSource} columns={columns} />
)
}
}
export default TestZhou