Antd中Table控件呈现网络获取的json数据(教程)
程序员文章站
2022-06-26 11:37:47
最近为了实现将从网络获取的json数据呈现了table中,做了几种尝试,最后确定了一种方案,即map解析获得的网络数据,将需要的data值丢到状态机state中,然后在呈现部分引用...
最近为了实现将从网络获取的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 ( ) } }
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中进行呈现,希望这篇博客对你有所帮助。
下一篇: AngularJs中的过滤器使用方法