Table 表格 官方Table api
先来看一下本次要实现的页面其中包含：
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的 columns 数据格式（必传）
* onSubmit | function| 处理搜索提交的方法，不传不显示搜索
* pagination | function| 处理翻页的方法
* bordered | boolean | Card 是否显示边框 false表示不显示边框，不传或者传true 显示边框
* linkName | string | 按钮名字 可不传，不传就是"+ 新建"
* scroll | int | 滚动
* rowSelection | object | 选择列表数据
* onClick | function| 如果按钮不是跳转，则自定义方法
* */
export default class ListQuery extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
const {
loading,
dataSource,
link,
items,
current,
total,
columns,
onSubmit,
pagination,
bordered,
linkName,
scroll,
onClick,
onReset,
rowSelection
} = this.props;
return (
<Card bordered={bordered}>
{
onSubmit && items ? <Search items={items} loading={loading} onSubmit={onSubmit} onReset={onReset}/> :
<Fragment/>
}
{
link || onClick ? <JumpLink style={onSubmit ? styles.newBtn : ''}
type="primary"
onClick={onClick}
name={linkName ? linkName : "+ 新建"}
link={link}/> : <div className={styles.empty}/>
}
<Table loading={loading}
columns={columns}
dataSource={dataSource}
size="middle"
className={styles.businessTable}
rowSelection={rowSelection ? rowSelection : null}
scroll={{x: scroll ? scroll : 800}}
pagination={false}/>
{
current ? <Row type="flex" justify="end" className={styles.paginationBox}>
<Pagination showQuickJumper onChange={pagination} current={current} total={total}/>
</Row> : <Fragment/>
}
</Card>
)
}
}
单独讲一下Table
<Table loading={loading}
columns={columns}
dataSource={dataSource}
pagination={false}/>
loading：一个页面友好交互的参数，请求数据时显示loading直到数据加载完成
dataSource：是列表的数据数组
pagination：分页器，列表组件默认有分页，一般情况下我们不使用它自带的
columns：array 类型。通俗的说就是定义表头，但是其中有好多列的配置项，如下边的代码简单说明常用的项。
{
title：列头显示文字
key：react需要的key
dataIndex：列数据在数据项中对应的key，就是我们有一个对象显示这一行数据
的时候，要显示哪个参数
width：列宽
render：复杂数据的渲染函数
}
在使用页面import后
//重置请求列表数据
onReset = () => {
}
//提交查询方法
onSubmit = (err, value) => {
if (err) {
return;
}
};
//翻页
pagination = (pageNumber) => {
console.log(pageNumber);
}
render(){
const searchs = [{
type: 'Input',
label: 'ID查询',
required: false,
placeholder: '请输入id',
parameter: 'id',
}, {
type: 'Select',
label: '科目查询',
required: false,
placeholder: '请选择',
parameter: 'subject',
options: subjectOptions
}];
return (
<PageHeaderLayout
/*title="题库查询"
content="PageHeaderLayout"*/
>
<ListQuery items={searchs}
columns={this.columns}
dataSource={dataSource}
current={page_no}
total={total}
loading={loading}
link="/question/create-question"
onSubmit={this.onSubmit}
onReset={this.onReset}
pagination={this.pagination}/>
</PageHeaderLayout>
)
}
里边的搜索组件后续总结（数组生成UI）
PageHeaderLayout是antd pro封装的组件，他根据我们上章中提到的menu.js 中的menuData自动生成如图1的面包屑，
我们说一下this.columns，这个是跟antd table组件的要求的固定格式
为了页面整洁，我们把它单独放在一个文件中，
import React from 'react';
import TooltipItem from 'components/TooltipItem';
/***
* 题库列表
* */
export const questionListColumns = [{
title: "ID",
dataIndex: "question_id",
key: "question_id",
}, {
title: "题干",
dataIndex: "question_title",
key: "question_title",
render: (text) => <TooltipItem value={text} maxLength={18}/>
}, {
title: "类型",
dataIndex: "question_type",
key: "question_type"
}, {
title: "状态",
dataIndex: "question_status",
key: "question_status"
}];
接下来我们讲一下如果列表有操作怎么办，如图1中我们想查看这条数据的详情，或者编辑这条数据，首先我们在构造函数中初始化this.columns，render可以在表格数据中添加react组件，我们来看action方法,
有两次参数，text是列表这个单元格要显示的文字，record是操作这条数据的对象，
一般我们需要从record中拿到操作这条数据的id，这样就可以去请求详情数据
constructor(props) {
super(props);
this.columns = [
...questionListColumns,
{
title: '操作',
render: this.action
}
];
}
action = (text,record)=>{
return <Fragment>
<a>修改</a>
<Divider type="vertical"/>
<a>详情</a>
<Divider type="vertical"/>
<a>上架</a>
</Fragment>
}
接下来我们需要说一下分页这件事儿，先来看代码
pagination=(pageNumber)=>{
}
<Pagination showQuickJumper onChange={pagination} current={current} total={total}/>
一般情况中上图的分页组件就能够满足我们的需求，使用非常简单，页面引入antd组件，我们这里只是说一下基本的四个参数、
current：表示当前显示第几页，这个是一个非常重要的参数
total：表示一共有多少条数据（会根据pageSize自动分页）
pageSize：每页显示的条数（默认是10条）
onChange：是我们点击翻页时的方法，我们可以在方法中具体实现翻页操作，它有一个参数，就是要跳到的页码
这样我们好像就能写一个列表页喽
网友评论