Ant Design Pro开发后台管理系统（Table）

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：是我们点击翻页时的方法，我们可以在方法中具体实现翻页操作，它有一个参数，就是要跳到的页码

这样我们好像就能写一个列表页喽

Ant Design Pro开发后台管理系统（Table）

Table 表格 官方Table api

Table 表格官方Table api