antd table 数组循环

╰+攻爆jí腚メ 2022-03-26 17:35 326阅读 0赞

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}  {c.course_start} - {c.course_end}</div>)}
              </span>
            )

3，详细代码如下

import React, { PureComponent } from "react";
    import { findDOMNode } from "react-dom";
    import moment from "moment";
    import { Link } from "react-router-dom";
    import { connect } from "dva";
    
    
    import styles from "./gradeList.less";
    
    const FormItem = Form.Item;
    
    @Form.create()
    class GradeList extends PureComponent {
      deleteGrade = id => {
        const { dispatch } = this.props;
        dispatch({ type: "grade/deleteGrade", payload: { id: id } });
      };
      queryDeltail = id => {
        const { dispatch } = this.props;
        dispatch({ type: "grade/detail", payload: { id: id } });
      };
      handleOk = () => {
        const { dispatch } = this.props;
    
        dispatch({ type: "grade/hideModal" });
      };
      handleCancel = () => {
        const { dispatch } = this.props;
    
        dispatch({ type: "grade/hideModal" });
      };
      onchange = (page, pageSize) => {
        const { dispatch, form } = this.props;
        form.validateFields((err, values) => {
          if (!err) {
            dispatch({
              type: "grade/fetch",
              payload: { page: page, limit: pageSize, ...values }
            });
          }
        });
      };
      handleSearch = e => {
        e.preventDefault();
        const { dispatch, form } = this.props;
    
        form.validateFields((err, values) => {
          if (!err) {
            dispatch({ type: "grade/fetch", payload: { ...values } });
          }
        });
      };
      handleFormReset = () => {
        const { form } = this.props;
        form.resetFields();
      };
    
      render() {
        const gradeList = this.props.gradeList;
       
        const grade =
          JSON.stringify(gradeDetails) !== "[]" ? gradeDetails.grade : [];
        const modalVisible = this.props.modalVisible;
        const { dispatch } = this.props;
        const width = 1200;
    
        const pagination = {
          total: this.props.total,
          pageSize: 10,
          onChange: this.onchange
        };
    
        const columns = [
          {
            title: "上课时间",
            dataIndex: "claxx_times",
            key: "claxx_times",
            render: claxx_times => (
              <span>
                {claxx_times.map(c => <div key={c.course_end}>{c.course_week}  {c.course_start} - {c.course_end}</div>)}
              </span>
            )
          },
        ];
    
        return (
          <div className={styles.listback}>
           
     
            <Table
              columns={columns}
              dataSource={gradeList}
              rowKey={record => record.id}
              pagination={pagination}
            />
            <Modal
              width={width}
              visible={modalVisible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            />
          </div>
        );
      }
    }
    function mapStateToProps(state) {
      return { ...state.grade };
    }
    export default connect(mapStateToProps)(GradeList);

4，效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70]: /images/20220326/29061ca996f547d488cdf03d19eb23c1.png