Ant Design Pro开发后台管理系统(Table)-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Ant Design Pro开发后台管理系统(Table)

简介: Table 表格 官方Table api 先来看一下本次要实现的页面其中包含: 1、面包屑 2、搜索组件的封装(对象生成UI) 3、Table 表格的使用 4、Pagination 分页的使用 本文只讲UI开发,接口开发后续更新 image table 的使用有很多形式和方法,可以直接看api。

Table 表格 官方Table api

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

1、面包屑

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

3、Table 表格的使用

4、Pagination 分页的使用

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

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章