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

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

1 голос
/ 05 августа 2020

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

код песочницы здесь

Спасибо

изображение здесь

Изображение здесь

здесь код 

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} />;
  }
}

1 Ответ

1 голос
/ 05 августа 2020

Вы хотите создать по 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

...