Table 表格 官方Table api
先來(lái)看一下本次要實(shí)現(xiàn)的頁(yè)面其中包含：
1、面包屑
2、搜索組件的封裝（對(duì)象生成UI）
3、Table 表格的使用
4、Pagination 分頁(yè)的使用
本文只講UI開(kāi)發(fā)，接口開(kāi)發(fā)后續(xù)更新
table 的使用有很多形式和方法，可以直接看api。
這塊兒講的是對(duì)整個(gè)搜索、table還有分頁(yè)的整體封裝，因?yàn)樯蠄D的形式應(yīng)用場(chǎng)景還是很多的，我們將整體封裝成一個(gè)組件，一個(gè)組件代表一個(gè)列表頁(yè)，這樣我們就不需要到處引用Antd組件，減少開(kāi)發(fā)過(guò)程中重復(fù)的工作。
在組件中把搜索的方法、翻頁(yè)的方法都拋出去，做到子組件專(zhuān)心顯示，不關(guān)系業(yè)務(wù)，父組件專(zhuān)心處理業(yè)務(wù)。
不多廢話直接貼代碼。（因?yàn)槭枪媒M件，我們把它放在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';
/**
* 每個(gè)頁(yè)面都引用一堆a(bǔ)ntd組件
* 封裝以后不需要同樣類(lèi)型的頁(yè)面引用同樣的模塊，只需要在這一個(gè)地方引用即可
* 子組件專(zhuān)注顯示，不關(guān)心業(yè)務(wù)，父組件專(zhuān)心處理業(yè)務(wù)
*
* loading | boolean | 加載loading
* dataSource | array | antd組件Table的 dataSource 數(shù)據(jù)格式（必傳）
* link | string | 新建按鈕的跳轉(zhuǎn)鏈接，不傳不顯示新建
* items | array | 數(shù)組對(duì)象，搜索生成頁(yè)面的對(duì)象 具體參考Search組件說(shuō)明
* current | int | 分頁(yè)顯示第幾頁(yè)（必傳）
* total | int | 分頁(yè)總共有多少條數(shù)據(jù)（必傳）
* columns | array | antd組件Table的 columns 數(shù)據(jù)格式（必傳）
* onSubmit | function| 處理搜索提交的方法，不傳不顯示搜索
* pagination | function| 處理翻頁(yè)的方法
* bordered | boolean | Card 是否顯示邊框 false表示不顯示邊框，不傳或者傳true 顯示邊框
* linkName | string | 按鈕名字 可不傳，不傳就是"+ 新建"
* scroll | int | 滾動(dòng)
* rowSelection | object | 選擇列表數(shù)據(jù)
* onClick | function| 如果按鈕不是跳轉(zhuǎn)，則自定義方法
* */
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>
)
}
}
單獨(dú)講一下Table
<Table loading={loading}
columns={columns}
dataSource={dataSource}
pagination={false}/>
loading：一個(gè)頁(yè)面友好交互的參數(shù)，請(qǐng)求數(shù)據(jù)時(shí)顯示loading直到數(shù)據(jù)加載完成
dataSource：是列表的數(shù)據(jù)數(shù)組
pagination：分頁(yè)器，列表組件默認(rèn)有分頁(yè)，一般情況下我們不使用它自帶的
columns：array 類(lèi)型。通俗的說(shuō)就是定義表頭，但是其中有好多列的配置項(xiàng)，如下邊的代碼簡(jiǎn)單說(shuō)明常用的項(xiàng)。
{
title：列頭顯示文字
key：react需要的key
dataIndex：列數(shù)據(jù)在數(shù)據(jù)項(xiàng)中對(duì)應(yīng)的key，就是我們有一個(gè)對(duì)象顯示這一行數(shù)據(jù)
的時(shí)候，要顯示哪個(gè)參數(shù)
width：列寬
render：復(fù)雜數(shù)據(jù)的渲染函數(shù)
}
在使用頁(yè)面import后
//重置請(qǐng)求列表數(shù)據(jù)
onReset = () => {
}
//提交查詢(xún)方法
onSubmit = (err, value) => {
if (err) {
return;
}
};
//翻頁(yè)
pagination = (pageNumber) => {
console.log(pageNumber);
}
render(){
const searchs = [{
type: 'Input',
label: 'ID查詢(xún)',
required: false,
placeholder: '請(qǐng)輸入id',
parameter: 'id',
}, {
type: 'Select',
label: '科目查詢(xún)',
required: false,
placeholder: '請(qǐng)選擇',
parameter: 'subject',
options: subjectOptions
}];
return (
<PageHeaderLayout
/*title="題庫(kù)查詢(xún)"
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>
)
}
里邊的搜索組件后續(xù)總結(jié)（數(shù)組生成UI）
PageHeaderLayout是antd pro封裝的組件，他根據(jù)我們上章中提到的menu.js 中的menuData自動(dòng)生成如圖1的面包屑，
我們說(shuō)一下this.columns，這個(gè)是跟antd table組件的要求的固定格式
為了頁(yè)面整潔，我們把它單獨(dú)放在一個(gè)文件中，
import React from 'react';
import TooltipItem from 'components/TooltipItem';
/***
* 題庫(kù)列表
* */
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: "類(lèi)型",
dataIndex: "question_type",
key: "question_type"
}, {
title: "狀態(tài)",
dataIndex: "question_status",
key: "question_status"
}];
接下來(lái)我們講一下如果列表有操作怎么辦，如圖1中我們想查看這條數(shù)據(jù)的詳情，或者編輯這條數(shù)據(jù)，首先我們?cè)跇?gòu)造函數(shù)中初始化this.columns，render可以在表格數(shù)據(jù)中添加react組件，我們來(lái)看action方法,
有兩次參數(shù)，text是列表這個(gè)單元格要顯示的文字，record是操作這條數(shù)據(jù)的對(duì)象，
一般我們需要從record中拿到操作這條數(shù)據(jù)的id，這樣就可以去請(qǐng)求詳情數(shù)據(jù)
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>
}
接下來(lái)我們需要說(shuō)一下分頁(yè)這件事兒，先來(lái)看代碼
pagination=(pageNumber)=>{
}
<Pagination showQuickJumper onChange={pagination} current={current} total={total}/>
一般情況中上圖的分頁(yè)組件就能夠滿(mǎn)足我們的需求，使用非常簡(jiǎn)單，頁(yè)面引入antd組件，我們這里只是說(shuō)一下基本的四個(gè)參數(shù)、
current：表示當(dāng)前顯示第幾頁(yè)，這個(gè)是一個(gè)非常重要的參數(shù)
total：表示一共有多少條數(shù)據(jù)（會(huì)根據(jù)pageSize自動(dòng)分頁(yè)）
pageSize：每頁(yè)顯示的條數(shù)（默認(rèn)是10條）
onChange：是我們點(diǎn)擊翻頁(yè)時(shí)的方法，我們可以在方法中具體實(shí)現(xiàn)翻頁(yè)操作，它有一個(gè)參數(shù)，就是要跳到的頁(yè)碼
這樣我們好像就能寫(xiě)一個(gè)列表頁(yè)嘍
