2017.11.6 - ant design table等組件的使用,以及 chrome 中 network 的使用


一、今日主要任務
悉尼小程序后台管理開發:
景點管理頁面: 獲取已有數據列表,選取部分數據呈現在表格中,根據景點名稱、分類過濾出對應的景點。
 
二、難點
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:查看該請求返回的字段及其值;
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM