React生成表格

#1 
data: [
      {
        name: '上衣',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
      {
        name: '牛仔裤',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
      {
        name: '鞋子',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
    ],

请教下各位，这样的数据如何生成下面的表格

#2

这个直接遍历数据啊，循环，用table或者自己布局都可以啊

#3 
this.state.data.map((ele,index) => {
    return (<tr>
    </tr>)
})

通过这种方式来循环，表格一下子就出来了

#4

办不到吧 主要是前面的rowspan的计算

#5

我也遇到这种为题了@ wb120334644 楼主最后如何解决的

#6

你好，现在这个问题你解决了吗

#7

没有啊没有啊没有啊没有啊没有啊

#8

git 看看这个呢

#9

我在网上也看到好多实例，现在的问题是我输出的数组不会遍历rowSpan,我用html 写str+=是可以的，
但是移植到，react 中就会有BUG

#10

不行 不考虑这中方法 还是继续再琢磨琢磨

#11

你也遇到这种问题了嘛？？

#12

是啊，正在琢磨中

#13

好的，我叫邢洋，很高兴认识你。哈哈！！！我缓缓脑袋，回头继续想，思维还没到那个地方，得一点点尝试啊

#14

实现跨行效果，重点理解下rowspan

文档地址：https://niexq.github.io/2019/06/26/react-table-rowspan小记/
（重点：关注个人手绘理解图说明）
欢迎评论、star

// 测试react实现可行代码
getTableRowData = () => {
    const data = [
      {
        name: '上衣',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
      {
        name: '牛仔裤',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
      {
        name: '鞋子',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
    ];
    const rowData = [];
    data.forEach((firstItem, firstIndex) => {
      const firstRowSpan = firstItem.children.reduce((total, curItem) => total + curItem.childChildren.length, 0);
      firstItem.children.forEach((secondItem, secondIndex) => {
        const secondRowSpan = secondItem.childChildren.length;
        secondItem.childChildren.forEach((thirdItem, thirdIndex) => {
          const tdData = [];
          if (secondIndex === 0 && thirdIndex === 0) {
            tdData.push(<td rowSpan={firstRowSpan}>{firstItem.name}</td>)
          }
          if (thirdIndex === 0) {
            tdData.push(<td rowSpan={secondRowSpan}>{secondItem.name}</td>)
          }
          rowData.push((
            <tr key={`row${firstIndex}${secondIndex}${thirdIndex}`}>
              {
                tdData
              }
              <td>{thirdItem}</td>
            </tr>
          ))
        })
      })
    })
    return rowData;
  }
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <table>
          <thead>
            <tr>
              <th>名称</th>
              <th>颜色</th>
              <th>规格</th>
            </tr>
          </thead>
          <tbody>
            {
              this.getTableRowData()
            }
          </tbody>
        </table>
      </div>
    )
  }
1 Like
#15

谢谢，刚看到，研究一下，前几天，脑袋感觉被堵塞了，缓了缓，继续突破，你的这个方法和思维，确实很有启发，感谢楼主，虽然还没写出来。哈哈哈

#16

对不起，搞错了，不是楼主。。。谢谢你

#17

你好，解决了吗？ 昨天我写了一个 https://gitee.com/vertexer/react-sku.git

#18

写了几种形式，不是特别的棒，但是功能上已经够用了。
目前根据一种数据格式来遍历的
遍历表格，借鉴了一点楼主的思维模式
，第一张图是生成td表格，第二章图是生成SKU，第三张图是生成前的数据列表
目前的话，我没有把自定义的sku加上，我这个代码改造下就可以用的

%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190627114554 %E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190627114627 %E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190627114704

#19

感谢您的回复。哈哈，你的这种模式，感觉和Vue 差不多，我见过一种，最后综合了一下。数据格式相对来说要简单一些，但是更改sku数据的话，还是有点麻烦

#20

不用谢:grinning: