关于antd table组件的基本使用方法

table组件，主要用于大量结构化的数据需要展现时使用，在各端应用开发中使用非常广泛，达到几乎必用的地步。在原生ios开发中，通常需要自定义cell来进行数据的展示，antd 的table组件功能相当强大，能实现的功能覆盖范围也相当广泛，本文只是简单介绍一下最基本的用法，有兴趣的可以直接去官网上看，示例更丰富，而且都带有效果展示。
首先，指定表格的数据源 dataSource 为一个数组：

const dataSource = [
  {
    key: '1',
    name: '胡大大',
    age: 32,
    address: '南湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡小小',
    age: 42,
    address: '南湖区湖底公园2号',
  },
];

再指定表格的列的名称：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

引入table，然后直接<Table>标签就能展示出效果来：

import {Table } from 'antd'
<Table dataSource={dataSource} columns={columns} />;

在数据较多，会自动分页展示，每一列会根据内容的长度自动撑长，上手使用非常简单，通常PC上对表格会有一些编辑等操作，在原生ios中需要自己布局、定义方法等一系列操作，antd table则只需要在列名称中添加链接就好：

{
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <span>
        <a href="javascript:;">Invite {record.name}</a>
        <Divider type="vertical" />
        <a href="javascript:;">Delete</a>
      </span>
    ),
  },

值得一提的是，表格的样式是默认的，需要修改的话要自己改变样式，可以参考以下方法：

.ant-table{
  :global {
    width: 98%;
    margin-left: 1%;
    .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
        padding: 6px 8px !important;
    }
    .ant-table-thead > tr > th {
        background-color: #242542;
        color: white;
    }
    .ant-table-thead > tr > th:hover {
        background-color: #535781;
    }
    .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
        background: rgb(201, 223, 11);
    }
    .ant-table-content { 
      background-color: #343655; 
      color: white;
     }
    .ant-table-tbody > tr:hover > td{
      background-color:rgba(106, 178, 245, 0.5) ! important;
     }
  }
}

自定义andt table表格样式的方式也比较多，上述方法可能会引起全局改变，如果只是改变代码中一个table，则需要注意以下。以上只是介绍的最最最基础的用法，还有很多高级一些的方法大家可以去官网细看。