一起使用mock数据动态创建表格

最新推荐文章于 2025-06-27 17:23:55 发布

weixin_30919571

最新推荐文章于 2025-06-27 17:23:55 发布

阅读量799

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 json ViewUI

原文链接：http://www.cnblogs.com/smart-girl/p/10072840.html

本文介绍如何在Ant Design中使用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已经被调用了

在页面上也已经渲染出10条数据

我们可以注意到这些数据都是一样的，我们需要将我们的mock数据变成动态的，这个就涉及到它的一些语法知识了。