React ant design table 单元崩溃问题

Question

我将我的 React 类型脚本项目用于 ant design table 我想知道如何做下图，如 table，我搜索任何教程但没有看到任何东西，任何人都知道如何正确地做到这一点。

谢谢

图片在这里

代码在这里

class App extends React.Component {
  columns: any = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags"
    },
    {
      title: "Action",
      key: "action"
    }
  ];

  data: any = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"]
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"]
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"]
    }
  ];
  render() {
    return <Table columns={this.columns} dataSource={this.data} />;
  }
}

Answer 1

您想在每行中创建 2 个子行，但只针对某些列。您可以为此使用 rowspan。

您可以复制您的行 (row1-row1-row2-row2-row3-row3-...)，并将子行值放入其中 (row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...)，然后使用 rowspan 作为您要扩展的列（如 Section和图像中的名称），并展开奇数行并折叠该列的偶数行。

完整代码：(Codesandbox Demo)

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

let multiRowRender = (value, row, index) => {
  const obj = {
    children: value,
    props: {}
  };
  if (index % 2 === 0) {
    obj.props.rowSpan = 2;
  }
  if (index % 2 === 1) {
    obj.props.rowSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: "Number",
    dataIndex: "number"
  },
  {
    title: "Issue",
    dataIndex: "issue"
  },
  {
    title: "Name",
    dataIndex: "name",
    render: multiRowRender
  },
  {
    title: "Section",
    dataIndex: "section",
    render: multiRowRender
  }
];

let data = [
  {
    key: "1",
    name: "John Brown",
    issues: [32, 100],
    numbers: [18889898989, 545054],
    section: "sec 1"
  },
  {
    key: "2",
    name: "Jim Green",
    issues: [42, 50],
    numbers: [18889898888, 1420054],
    section: "sec 2"
  }
];
let data2 = [];
data.forEach(d => {
  data2.push({ ...d, issue: d.issues[0], number: d.numbers[0] });
  data2.push({
    ...d,
    issue: d.issues[1],
    number: d.numbers[1],
    key: d.key + "-row2"
  });
});
data = data2;

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

Codesandbox Demo

React ant design table 单元崩溃问题

React ant design table cell collapse issue

reactjs

antd

ant-design-pro

react-typescript