antdesgin table斑马线_Ant Design Pro开发后台管理系统（Table）

先来看一下本次要实现的页面其中包含：

1、面包屑

2、搜索组件的封装(对象生成UI)

3、Table 表格的使用

4、Pagination 分页的使用

本文只讲UI开发，接口开发后续更新

image

table 的使用有很多形式和方法，可以直接看api。

这块儿讲的是对整个搜索、table还有分页的整体封装，因为上图的形式应用场景还是很多的，我们将整体封装成一个组件，一个组件代表一个列表页，这样我们就不需要到处引用Antd组件，减少开发过程中重复的工作。

在组件中把搜索的方法、翻页的方法都抛出去，做到子组件专心显示，不关系业务，父组件专心处理业务。

不多废话直接贴代码。(因为是公用组件，我们把它放在components文件夹下)

import React, {Component, Fragment} from 'react';

import {

Card,

Table,

Row,

Pagination,

} from 'antd';

import Search from '../Search/index';

import JumpLink from '../Button/JumpLink';

import styles from './index.less';

/**

* 每个页面都引用一堆antd组件

* 封装以后不需要同样类型的页面引用同样的模块，只需要在这一个地方引用即可

* 子组件专注显示，不关心业务，父组件专心处理业务

*

* loading | boolean | 加载loading

* dataSource | array | antd组件Table的 dataSource 数据格式(必传)

* link | string | 新建按钮的跳转链接，不传不显示新建

* items | array | 数组对象，搜索生成页面的对象 具体参考Search组件说明

* current | int | 分页显示第几页(必传)

* total | int | 分页总共有多少条数据(必传)

* columns | array | antd组件Table的 c