表格 Table - Ant Designant.design
一、Table的基本用法
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table, Tag, Space } from 'antd';
//这里是title的内容
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
//这里是表格内的数据
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
];
ReactDOM.render(
, document.getElementById('container'));columns={columns} 代表表头
dataSource={data} 代表表格内的数据
columns 数组内每一项内的dataIndex的value对应下面data数组内key的值,这是他的基本用法
二、Table去掉默认分页
在使用Table组件时,有时候会想把分页去掉那么我们应该怎么做呢
答案是:pagination={false}
代码演示:
未完待续