Antd中Table控件呈现网络获取的json数据

最近为了实现将从网络获取的json数据呈现了table中,做了几种尝试,最后确定了一种方案,即map解析获得的网络数据,将需要的data值丢到状态机state中,然后在呈现部分引用antd中的table,这样便达到了需要的效果。


1、呈现结果


2、普通用法

table的普通用法可以参考antd中table的用法:https://ant.design/components/table-cn/
这里粘出我跑出来的代码以及部分模块的说明。

import React, { Component } from 'react';
import { Table } from 'antd'
//引入antd样式,否则数据呈现便没有样式
import 'antd/dist/antd.css';
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      //用状态机来控制呈现的header
      columns:[{
        title: '学号',
        dataIndex: 'num',
        key: 'num',
      }, {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      }],
      //用状态机来控制呈现的数据
      dataSource: [{
        key: '1',
        num:'2014669',
        name: '张三',
        sex: '男',
      }, {
        key: '2',
        num:'2014670',
        name: '李四',
        sex: '男',
      }]
    }
  }
  render() {
    return (
        <Table dataSource={this.state.dataSource} columns={this.state.columns} showHeader={true} pagination={false} size="middle" />
    )
  }
}



3、网络获取数据json数据table呈现

代码与上面代码没有什么差别,但是多了一步在componentWillMount中模拟从网络获取的数据,此时需要对网络获取的数据进行解析,丢到dataSource中,在render中引用this.state.dataSource进行呈现。

//引用同上
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
     ……
      dataSource: []
    }
  }
  componentWillMount() {
    //模拟获取的网络数据,数据如下
    const data = [{
      num: '2014669',
      username: '张三',
      usersex: '男'
    }, {
      num: '2014670',
      username: '李四',
      usersex: '男',
    }, {
      num: '2014671',
      username: '翠花',
      usersex: '女',
    }, {
      num: '2014672',
      username: '朵儿',
      usersex: '女',
    }];
    //对模拟的网络数据进行解析,丢到datasource中
    data.map((v,i)=>{
      this.state.dataSource.push({
        key:'i',
        num:v.num,
        name:v.username,
        sex:v.usersex
      })
    })
  }
  render() {
    return (
      <Table dataSource={this.state.dataSource} columns={this.state.columns} showHeader={true} pagination={false} size="middle" />
    )
  }
}



4、总结

table对于呈现相对来说比较大的数据量还是挺美观和规整的,而且只要数据格式对了,只引用Table标签就可以对数据进行呈现了。这篇博客主要目的是为了模仿数据从网络获取,在table中进行呈现,希望这篇博客对你有所帮助。

发布了21 篇原创文章 · 获赞 28 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览