2017.11.6 - ant design table等組件的使用，以及 chrome 中 network 的使用
阿新 • • 發佈：2017-11-13
rom sources work div gin from 表格 組件化 管理 一、今日主要任務
悉尼小程序後臺管理開發：
景點管理頁面： 獲取已有數據列表，選取部分數據呈現在表格中，根據景點名稱、分類過濾出對應的景點。
二、難點
1. 項目技術選取：
ant design、react、es6；
2. 在此之前，只看過一點點 es6 的語法，未實操；react 也只是看過語法，未實操；ant design 是個什麽鬼，第一次聽說。
3. 所遇的主要問題：
（1）ant design 中 table 組件的使用：
引入 Table、Buttton、Col、Row、Select 組件 => import {Table, Button, Col, Row, Select} from ‘antd‘;
申明 Select 下的 Option => const Option = Select.Option, 使用 => <Select><Option></Option></Select>;
將 Button 組件化 => const ButtonGroup = Button.Group, 使用 => <ButtonGroup><Button></Button></ButtonGroup>;
創建Table =>
<Table rowKey={(record) => record.id} columns={columns} dataSource={sites} pagination={false} bordered size="middle" />
record 是從 dataSources 裏面獲取的每行數據，在創建行的時候，ant design 會自動為每行創建一個唯一的 id；
在 columns 中創建列，如
const columns = [
{
title: ‘中文名稱‘, // 列的名稱
dataIndex: ‘cnTitle‘, // 列的數據，值從 dataSource 的對象中取，要求屬性名是相同的才能取到正確的值
key: ‘cntitle‘,
},
{
title: ‘英文名稱‘,
dataIndex: ‘enTitle‘,
key: ‘entitle‘,
}
]
（2）報錯信息，500 服務器錯誤，401 未授權，（看一下application裏的user信息是否過期），network中的請求信息，請求結果；
network - Headers：查看請求 url，請求 method，以及請求 status；
network - Request Payload：查看該請求返回的字段及其值；
2017.11.6 - ant design table等組件的使用，以及 chrome 中 network 的使用