zoukankan      html  css  js  c++  java
  • 一起使用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数据变成动态的,这个就涉及到它的一些语法知识了。 ![](https://img2018.cnblogs.com/blog/1037363/201812/1037363-20181205224340628-996704444.png)

    接下来我们再看渲染结果就可以发现数据都是动态的了。

    平时也是后端给接口我们,如果能够自己mock数据的话,相信是一件很有成就感的事情,同时也能够减少后端同事的压力。
     
     
     
     
     

    by:本文整理自单车后台管理系统视频,是博客园的园友@人道浮沉分享给我的,非常感谢他。

  • 相关阅读:
    construction of tuples containing 0 or 1 items
    globals()
    __new__
    ubuntu系统安装mysql登陆提示 解决Mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost'问题
    ubuntu系统更新源
    Python Web开发问题收集(二)
    linux后台执行./run.py提示python syntax error near unexpected token `('
    linux下执行scrapy的爬虫定时任务
    ubuntu系统中crontab的使用介绍
    JMeter BeanShell断言使用
  • 原文地址:https://www.cnblogs.com/smart-girl/p/10072840.html
  • Copyright © 2011-2022 走看看