一起使用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,我们可以直接使用

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(
      <div>
        <Card title="动态数据渲染表格" style={{margin:'10px 0'}}>
          <Table
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>
      </div>
    )
  }
}

我们可以看到list已经被调用了

在页面上也已经渲染出动态数据

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

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

原文地址:https://www.cnblogs.com/smart-girl/p/10072840.html

时间: 2024-10-12 19:26:30

一起使用mock数据动态创建表格的相关文章

使用json数据动态创建表格2(多次绘制第一次简化 var tr=tbody.insertRow();)

<!DOCTYPE HTML> <html> <head> <title>动态创建表格</title> <meta charset="utf-8" /> <style> table{width:600px; border-collapse:collapse; text-align:center; } td,th{border:1px solid #ccc} </style> </hea

FineUIMvc随笔 - 动态创建表格列

声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC 中,如果还想着 WebForms 的那一套,想着怎么才能在 Controller 中访问 View 中的表格控件,这是行不通的. 我曾写过一个系列文章<ASP.NET MVC快速入门(MVC5+EF6)>,开篇就讲到了 MVC 中的页面的生成流程: 这个页面之所以能够呈现在我们眼前,经历了三个主

JSTL根据后台传输list大小动态创建表格

最近,项目中需要写一个根据后台传入List类型对象的大小来动态创建表格,并在JSP页面中将信息显示出来,并且对于一些特殊信息颜色飘红表示. 首先看一下List对象存储的内容,这个项目需要检测系统中一些服务器的连接情况,每个应用可能关联多个服务器,服务器的数量不同,所以使用List来存储信息,List中的对象是一个长度为2的String数组.这个String数组的第一个位置存放需要检测服务器的ip:port,第二个位置存放是检测结果,结果又两种,连接成功!和连接失败! 例如下面一个String数组

javascript动态创建表格:新增、删除行和列

转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加

javascript如何实现动态创建表格和增加表格的行

javascript如何实现动态创建表格和增加表格的行:在实际应用中,表格的行数不一定都是符合实际要求的,可能需要动态的增加表格的行数,下面就是一段实现此功能的代码实例,并且还实现了隔行变色功能.有需要的朋友可以自行分析一下代码,非常的简单,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </

html中动态创建表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>dtTable.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equ

js动态创建表格------Day59

刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完成了今天的记录,结果临关机,登录了下,发现又好了,就再多花个几分钟转下吧,也不管究竟在意的是什么了,权当强迫症了... 前几天记录了动态的添加一行一列:insertRow()和insertCell();动态的删除一行一列:deleteRow()和deleteCell():选中一行:this的参数传递,这些都是实现的关键,但是这一切都建立在一个基础上:那就是存在一个表格.今天就来记录下动态建立表格的方法: 事实上在刚开始的时候,我只想到了一个

第84天:jQuery动态创建表格

jQuery动态创建表格 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态创建表格</title> 6 <script src="jquery-1.11.1.js"></script> 7 <style> 8 table {

动态创建表格1

<!DOCTYPE HTML> <html> <head> <title>动态创建表格</title> <meta charset="utf-8" /> <style> table{width:600px; border-collapse:collapse; text-align:center; } td,th{border:1px solid #ccc} </style> </hea