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 (
      
        
        {
          onSubmit && items ?  :
            
        }
        
        
        {
          link || onClick ?  : 
} { current ? : } ) } }

单独讲一下Table

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 (
      
        
        
      
    )
}

里边的搜索组件后续总结(数组生成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) => 
}, {
  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 
    修改
    
    详情
    
    上架
  
}

接下来我们需要说一下分页这件事儿,先来看代码

pagination=(pageNumber)=>{

}

          

一般情况中上图的分页组件就能够满足我们的需求,使用非常简单,页面引入antd组件,我们这里只是说一下基本的四个参数、
current:表示当前显示第几页,这个是一个非常重要的参数
total:表示一共有多少条数据(会根据pageSize自动分页)
pageSize:每页显示的条数(默认是10条)
onChange:是我们点击翻页时的方法,我们可以在方法中具体实现翻页操作,它有一个参数,就是要跳到的页码

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

你可能感兴趣的:(Ant Design Pro开发后台管理系统(Table))