在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:本文整理自单车后台管理系统视频,是博客园的园友@人道浮沉分享给我的,非常感谢他。

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

  1. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  2. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  3. FineUIMvc随笔(1)动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  4. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  5. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  6. jQuery 根据JSON数据动态生成表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  8. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  9. 第84天:jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. Centos7部署elasticsearch并且安装ik分词以及插件kibana

    第一步 下载对应的安装包 elasticsearch下载地址:https://www.elastic.co/cn/downloads/elasticsearch ik分词下载:https://gith ...

  2. PHP从入门到精通(五)

    字符串三种声明方式 1."":双引号中可以解析变量"{$a}",双引号中可以使用任何转义字符:2.'':单引号中不可以解析变量,单引号中不可以使用转义字符(但是 ...

  3. Notes of Daily Scrum Meeting(12.23)

    今天的团队任务总结如下: 团队成员 今日团队工作 陈少杰 调试网络连接,寻找新的连接方法 王迪 建立搜索的UI界面 金鑫 查阅相关资料,熟悉后台的接口 雷元勇 建立搜索的界面 高孟烨 继续美化界面,熟 ...

  4. 第三个Sprint ------第六天

    分数计算界面代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:a ...

  5. 爬虫时http错误提示

    在爬虫,请求网站的时候,有时候出现域名报错,所出现的代码所对应的意思:

  6. [2017BUAA软工]第零次博客作业

    第一部分:结缘计算机 1. 你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 当年高考前在专业这件事上纠结了好久,因为我对于大学各个专业具体学什么都不甚了解,于是就迟迟没有明确的目 ...

  7. Linux技巧汇总

    Linux改变用户登录的Shell: usermod -s /bin/zsh 用户名 改变文件夹.文件的所属用户组和用户 chown root:root testfile

  8. JS创建事件的三种方式(实例)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick=&qu ...

  9. PGSQL 获取数据库大小以及表达小等的SQL

    SELECT d.datname AS Name, pg_catalog.pg_get_userbyid(d.datdba) AS Owner, CASE WHEN pg_catalog.has_da ...

  10. 关于EXCEL if、countif 在查找数据的用法

    最近被其他部门的同事教导使用excel.突然觉得以前用代码切来切去的东西,和频繁比对的数据原来是用excel就能那么方便的算出,瞬间感觉打开了新世界的大门. 先说if和countif结合使用,来判断一 ...