在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