先来看一下本次要实现的页面其中包含:
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