表单验证系列（一）：Table主页

技术栈：umi、React、ts、tea-component
搭建基础父级页面

import React, { useRef, useState, Fragment } from 'react';
import { useHistory  } from 'react-router-dom';
import {
  Layout,
  Card,
  Button,
  SearchBox,
  Table,
  Justify,
} from 'tea-component';

const { Content } = Layout;

export default function TestValidation() {
  const history = useHistory();

  return (
    <Content className="oit-layout--fixheader">
      <Content.Header title="表单校验"></Content.Header>
      <Content.Body full className="activitiesLists testValidation-cardBody">
        <Table.ActionPanel>
          <Justify
            left={
              <Button type='primary' onClick={() => history.push('/TestValidation/add')}>新增</Button>
            }
            right={
              <>
                <SearchBox />
                <Button icon="setting" />
                <Button icon="refresh" />
                <Button icon="download" />
              </>
            }
          ></Justify>
        </Table.ActionPanel>
        <Card>
          <Card.Body>
            <Table
              bordered
              records={[{
                key: '键名',
                value: '键值'
              }]}
              columns={[
                {
                  key: "key",
                  header: "Key",
                },
                {
                  key: "value",
                  header: "Value",
                },
                {
                  key: "",
                  header: "操作",
                  render: () => (
                    <Fragment>
                      <Button type='link' onClick={() => history.push('/TestValidation/edit')}>编辑</Button>
                      <Button type='link'>删除</Button>
                    </Fragment>
                  )
                },
              ]}
            />
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}