Antd表从动态数据中分组数据[关闭]答案

【问题标题】：Antd table grouping data from dynamic data [closed]Antd表从动态数据中分组数据[关闭]
【发布时间】：2020-03-06 08:07:16
【问题描述】：

我正在尝试构建一个 Antd 表，其中有两个主要列 District, Exam Details。在Exam Details 列里面我想要三列

性别详情
候选人总数
通过的候选人总数

如下图

我试过这个代码：codesandbox

【问题讨论】：

稍微调整一下数据数组可以吗？
正在尝试解决方案，如果有一个解决方案，那就太好了。现在可以调整数组以获得输出
你的问题是什么？

标签： reactjs antd

【解决方案1】：

我已将列更改为有孩子。它非常接近您想要实现的目标。

const columns = [
    {
      title: "District",
      dataIndex: "state_name",
      key: "state_name",
      render: (value, row, index) => {
        const obj = {
          children: value,
          props: {}
        };
        console.log(obj.children, index);
        if (index % 3 === 0) {
          obj.props.rowSpan = 3;
        }
        // These two are merged into above cell
        if (index % 3 === 1) {
          obj.props.rowSpan = 0;
        }
        if (index % 3 === 2) {
          obj.props.rowSpan = 0;
        }
        return obj;
      }
    },
    {
      title: "Exam Details",
      children: [
        {
          title: "Gender Details",
          dataIndex: "gender",
          key: 1
        },
        {
          title: "Total number of candidates",
          dataIndex: "total",
          key: 2
        },
        {
          title: "Total Number of candidates passed",
          dataIndex: "passed_total",
          key: 3
        }
      ]
    }
  ];

  const data = [
    {
      state_name: "Karnataka",
      gender: "Boys",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Karnataka",
      gender: "Girls",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Karnataka",
      gender: "Transgender",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Kerala",
      gender: "Boys",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Kerala",
      gender: "Girls",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Kerala",
      gender: "Transgender",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Tamilnadu",
      gender: "Boys",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Tamilnadu",
      gender: "Girls",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Tamilnadu",
      gender: "Transgender",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Goa",
      gender: "Boys",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Goa",
      gender: "Girls",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Goa",
      gender: "Transgender",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Andhra Pradesh",
      gender: "Boys",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Andhra Pradesh",
      gender: "Girls",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    },
    {
      state_name: "Andhra Pradesh",
      gender: "Transgender",
      total: Math.floor(Math.random() * 90 + 10),
      passed_total: Math.floor(Math.random() * 90 + 10)
    }
  ];

Sandbox url

@更新

解决了这个问题，基本上外面有一个变量，当sameKey重复不设置计数时rowSpan为0，所以它会被隐藏。

逻辑

let sameKey;
  const columns = [
    {
      title: "District",
      dataIndex: "state_name",
      key: "state_name",
      render: (value, row, index) => {
        const obj = {
          children: value,
          props: {}
        };
        if (!(sameKey !== value)) {
          obj.props.rowSpan = 0;
          return obj;
        }
        const count = data.filter(item => item.state_name === value).length;
        sameKey = value;
        obj.props.rowSpan = count;
        return obj;
      }
    },

使用动态数量的性别行工作 codesandbox

【讨论】：

但有一个疑问，如果我删除任何州的女孩、男孩或跨性别数据，它将以错误的顺序显示。因为我们在硬编码逻辑不是
是的，有三组性别很重要。但我们也可以尝试使其动态化。
这就是我想要的，因为有些州不会有三种性别，正如你在屏幕截图中看到的那样，hrapradesh 有一个，goa 有两个
我认为我们需要对项目进行计数并使用该计数 let count = data.filter(d => d.state_name === value).length;不是吗？
是的，我想是的。