Проблема сворачивания ячеек таблицы React Ant Design

Я использую свой проект сценария типа реакции для дизайна муравьев 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} />;
  }
}

reactjs react-typescript antd ant-design-pro
person core114    schedule 05.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы хотите создать по 2 подстрочки в каждой строке, но только для некоторых столбцов. вы можете использовать rowspan для этого.

вы можете продублировать свои строки (row1-row1-row2-row2-row3-row3-...) и поместить в них значения вложенных строк (row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...), затем использовать rowspan для столбцов, которые вы хотите расширить (например, раздел и имя на вашем изображении), и развернуть нечетные строки и свернуть четные строки для этой колонки.

полный код: (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

person yaya    schedule 05.08.2020
comment
Да, мне нужен этот тип, но его нельзя добавить в скрипт типа, codeandbox.io/s/react -typescript-kismw - person core114; 05.08.2020
comment
@ core114 ​​вы имеете в виду, что у вас проблема с функцией рендеринга, поэтому исправьте ее: codesandbox.io/s/react-typescript-xswi1?file=/src/index.tsx? - person yaya; 05.08.2020