欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Antd中Table控件呈现网络获取的json数据(教程)

程序员文章站 2022-06-26 11:37:47
最近为了实现将从网络获取的json数据呈现了table中,做了几种尝试,最后确定了一种方案,即map解析获得的网络数据,将需要的data值丢到状态机state中,然后在呈现部分引用...

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

1、呈现结果

Antd中Table控件呈现网络获取的json数据(教程)

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 (
        
    )
  }
}

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 (
      

4、总结

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