一起使用mock數據動態創建表格

在ant-design中，我們創建一個基礎table會怎么實現呢？
如下代碼可視，我們會自己創建一些數據，在表格中渲染出來，如下

<Card title="基礎表格">
<Table
columns={columns}
dataSource={this.state.dataSource}
pagination={false} 
/>
</Card>

const columns=[
      {
        title:'id',
        dataIndex:'id'
      },
      {
        title:'用戶名',
        dataIndex:'userName'
      },{
        title:'性別',
        dataIndex:'sex'
      },
      {
        title:'愛好',
        dataIndex:'hobby'
      }
    ]

  componentDidMount(){
    const data=[
      {
        id:'0',
        userName:'jser',
        sex:'girl',
        hobby:'jump'
      },
      {
        id:'1',
        userName:'小LUA',
        sex:'girl',
        hobby:'eat'

      },
      {
        id:'2',
        userName:'jYung',
        sex:'girl',
        hobby:'dance'
      }
    ]
    // 把數據存起來
    this.setState({
      dataSource:data
    })
    
  }

表格如下

當然這是數據比較少的情況下，如果數據很多呢？
我們可以通過使用mock的方式，動態創建數據

第一步：進入官網注冊,並登錄

進入之后的界面 ####第二步：創建我們的項目，查看我們創建的項目 ####第三步：進入項目，點擊創建項目，創建接口 如下圖是我根據我的需求創建的接口 跟大家推薦一個網站 我們根據文檔，來創立我們的多條數據 點擊創建跳轉至 點擊預覽數據 ####第四步：在我的項目中使用，由於已經安裝了axios，我們可以直接使用 ```js import React from 'react' import 'antd/dist/antd.css' import{Card,Table} from 'antd' import axios from 'axios' export default class BasicTable extends React.Component{ state={ dataSource2:[] } componentDidMount(){ this.request() } //動態獲取mock數據 request=()=>{ let baseUrl='https://www.easy-mock.com/mock/5c07a781d292dd2dc4f9caa8/mockapi' axios.get(baseUrl+'/table/list').then((res)=>{ // console.log(JSON.stringify(res)) if(res.status=='200'&& res.data.code=='0'){ this.setState({ dataSource2:res.data.result }) } }) } render(){ const columns=[ { title:'id', dataIndex:'id' }, { title:'用戶名', dataIndex:'userName' },{ title:'性別', dataIndex:'sex' }, { title:'愛好', dataIndex:'hobby' } ] return(

) } } ``` 我們可以看到list已經被調用了 在頁面上也已經渲染出10條數據 我們可以注意到這些數據都是一樣的，我們需要將我們的mock數據變成動態的，這個就涉及到它的一些語法知識了。 

接下來我們再看渲染結果就可以發現數據都是動態的了。

平時也是后端給接口我們，如果能夠自己mock數據的話，相信是一件很有成就感的事情，同時也能夠減少后端同事的壓力。
 
 
 
 
 

by：本文整理自單車后台管理系統視頻，是博客園的園友@人道浮沉分享給我的，非常感謝他。