antd table 数组循环

最新推荐文章于 2023-08-16 16:46:54 发布

小红同学5

最新推荐文章于 2023-08-16 16:46:54 发布

阅读量5.6k

点赞数 2

分类专栏： antd 文章标签： table数组显示 antd

本文链接：https://blog.csdn.net/xh_960125/article/details/86529059

版权

这篇博客介绍了如何处理接口返回的数据结构，并利用antd的Table组件进行展示。通过主要和详细代码展示，实现了从数组到表格的转换，最后呈现了实际效果。

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

1，接口返回数据结构

{
    "success": 1,
    "msg": "获取成功",
    "total": 2130,
    "limit": 10,
    "data": [
        {
            "id": 40,
            "claxx_times": [
                {
                    "course_week": "星期二",
                    "course_start": "17:30",
                    "course_end": "19:30"
                },
                {
                    "course_week": "星期一",
                    "course_start": "13:16",
                    "course_end": "14:01"
                }
            ]
        },
          
    ]
}

2，主要代码如下

render: claxx_times => (
          <span>
            {claxx_times.map(c => <div key={c.course_end}>{c.course_week}&nbsp;&nbsp;{c.course_start}&nbsp;-&nbsp;{c.