react项目中，在tab列表上展示某个字段以 数组形式 展示

在做中燃的项目时，遇到了一个需求，就是想要在展示的列表上，把发票展示成多个号码，在一个列里展示。对前端来说用 map，就可以了，需要后台配合，返回一个数组的形式

实例代码1
先看看 ant.design官网里的。

假设后端返回的是data

import { Table, Tag, Space } from 'antd';
const { Column, ColumnGroup } = Table;

const data = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
我们进行render 渲染
ReactDOM.render(
  <Table dataSource={data}>
    <ColumnGroup title="Name">
      <Column title="First Name" dataIndex="firstName" key="firstName" />
      <Column title="Last Name" dataIndex="lastName" key="lastName" />
    </ColumnGroup>
    <Column title="Age" dataIndex="age" key="age" />
    <Column title="Address" dataIndex="address" key="address" />
    <Column
      title="Tags"
      dataIndex="tags"
      key="tags"
      render={tags => (
        <>
          {tags.map(tag => (
            <Tag color="blue" key={tag}>
              {tag}
            </Tag>
          ))}
        </>
      )}
    />
    <Column
      title="Action"
      key="action"
      render={(text, record) => (
        <Space size="middle">
          <a>Invite {record.lastName}</a>
          <a>Delete</a>
        </Space>
      )}
    />
  </Table>,
  mountNode,
);

主要的就下面的步骤

  <Column
      title="Tags"
      dataIndex="tags"
      key="tags"
      render={tags => (
        <>
          {tags.map(tag => (
            <Tag color="blue" key={tag}>
              {tag}
            </Tag>
          ))}
        </>
      )}
    />

实例代码2

假设接口返回数据结构

{
"success": 1,
"msg": "获取成功",
"total": 2130,
"limit": 10,
"data": [
    {
        "id": 40,
        "times": [
            {
                "week": "星期二",
                “start": "17:30",
                "end": "19:30"
            },
            {
                "week": "星期一",
                "start": "13:16",
                "end": "14:01"
            }
        ]
    },
      
]

}

那么主要的代码是

render: times => (
          <span>
            {times.map(c => <div key={c.end}>{c.week}&nbsp;{c.start}&nbsp;{c.end}</div>)}
          </span>
        )

详细代码

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: "times",
        key: "times",
        render: times => (
          <span>
            {times.map(c => <div key={c.end}>{c.week}&nbsp;&nbsp;{c.start}&nbsp;-&nbsp;{c.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);

实例3

{
title: '发票号码',
align: 'center',
dataIndex: 'invNos', //invoiceNumber
key: 'invNos'
// width: 150,
// render: (value, record) => {
//   const { id } = record || {};
//   return <Link to={`/fin/invoice/incomingRegister/view/${id}`}>{value}</Link>;
// }
 render={invNos => (
    <>
      {invNos.map(invNo => (
        <Tag color="blue" key={invNo}>
          {invNo}
        </Tag>
      ))}
    </>
  )}
},

下边是render展示

     <ElSearchTable
      id='incomingRegister'
      rowKey='id'
      tableId='fin_invoice_incomingRegisterList'
      onRef={(ref) => (this.tableRef = ref)}
      mode={{
        proxy: true, // 筛选器
        search: true, // searchForm
        action: true,
        pagination: true, // 分页
        descriptions: true, // descriptions
        tabs: false
      }}
      searchFormProps={getTableSearchFormItems()}
      columns={getTableColumns({that: this })}
      actionButtons={
        getTableActionButtons({
          handleCreate: this.handleCreate,
          handleImport: this.handleImport,
          handleExport: this.handleExport
      })
    }
      rowSelectionConfig={{
        disabledRowIds: [],
        // type: 'checkbox',
        type: 'radio',
        fixed: false,
        // onChange: ({ selectedRowKeys, selectedRows }) => {
        //   this.setState({
        //     selectedRowKeys,
        //     selectedRows
        //   });
        // }
      }}
      tableProxy={{
        request: (paramData) => {
          // paramData.orders = [{ asc: false, column: 'createTime' }];
          const params = {
            orders: [{ asc: false, column: 'createTime' }],
            ...paramData,
            settleEntityId: paramData.settleEntityId?.id,
            contactId: paramData.contactId?.id,
          // paramData.whId = paramData?.whId?.whId; //需要确定是否多选
          // paramData.itemId = paramData?.itemId?.map((x) => x.id); //需要确定是否多选
          // paramData.whId = paramData?.whId?.map((x) => x.whId); //需要确定是否多选

            ...this.handleValidRange(paramData) // 时间处理
          };

          return service.getList(params);
        },
        successCallBack: (tableRef) => { },
        errCallBack: () => {
          console.log('err');
        },
        props: {
          success: 'success',
          result: 'data.records',
          total: 'data.total'
        },
        autoLoad: true
      }}
    />
    这样就可以满足需求了
    欢迎提供更好的方法