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

最新推荐文章于 2023-10-29 17:53:58 发布

zfan520

最新推荐文章于 2023-10-29 17:53:58 发布

阅读量4k

点赞数 1

分类专栏： Reactjs 文章标签： Antd Table json数据呈现

本文链接：https://blog.csdn.net/zfan520/article/details/79220784

版权

本文介绍如何将通过网络获取的JSON数据在Ant Design的Table组件中进行展示。通过在componentWillMount阶段模拟获取数据，解析JSON并存储在state中，然后在Table组件的dataSource属性中引用这些数据，从而实现数据的动态呈现。这种方法适用于较大数据量的场景，且只需正确格式化数据，即可轻松展示。

摘要由CSDN通过智能技术生成

最近为了实现将从网络获取的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 = {