ant design pro实例

参考：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