天天看點
傳回

Ant Design Pro開發背景管理系統（Table）

Table 表格 官方Table api

先來看一下本次要實作的頁面其中包含：

1、面包屑

2、搜尋元件的封裝（對象生成UI）

3、Table 表格的使用

4、Pagination 分頁的使用

本文隻講UI開發，接口開發後續更新

Ant Design Pro開發背景管理系統（Table）

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：是我們點選翻頁時的方法，我們可以在方法中具體實作翻頁操作，它有一個參數，就是要跳到的頁碼

這樣我們好像就能寫一個清單頁喽

前端開發 api 資料格式 資料格式前端 design系統 pro sign背景管理系統 table使用design
上一篇: Ant Design Pro開發背景管理系統（權限）
下一篇: 英語月份

繼續閱讀