时间戳

首页 > 解决方案 > 如何在 Antd Table 中将多个数据显示到单个列/单元格中？

antd - 如何在 Antd Table 中将多个数据显示到单个列/单元格中？

问题描述

例如：- 我从 firebase 得到了四个 json 格式的数据

  {
     "firstName":"FName1",
     "lastName":"LName1",
     "initial":"F.L1",
     "Age":"25"
  },
  {
     "firstName":"FName2",
     "lastName":"LName2",
     "initial":"F.L2",
     "Age":"23"
  }
``

我想将所有三个数据显示在一个列中：Like--

     **Full Name**             **Age**
     FName1 LName1 (F.L1)        25
     FName2 LName2 (F.L2)        23

标签： antd

解决方案

用于render显示多个数据的列

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Table } from 'antd';

const columns = [
  {
    title: "Full Name",
    dataIndex: "fullname",
    render: (text, record) => (
      <span>{record.firstName} {record.lastName} ({record.initial})</span>
    )
  },
  {
    title: "Age",
    dataIndex: "Age"
  },
];

const data = [
  {
    "firstName":"FName1",
    "lastName":"LName1",
    "initial":"F.L1",
    "Age":"25"
 },
 {
    "firstName":"FName2",
    "lastName":"LName2",
    "initial":"F.L2",
    "Age":"23"
 }
];

ReactDOM.render(
  <Table columns={columns} dataSource={data} pagination={false} />,
  document.getElementById("container")
);

推荐阅读