antd表格行合并不会写

Question

renderColumn() {
        const columns = [
            {
                title: '商品名称',
                dataIndex: 'productName',
                render: (text, record, index) => {
                    let obj = {
                        children: text,
                        props: {}
                    }
                    if (index === 0) {
                        obj.props.rowSpan = 3
                    } else {
                        obj.props.rowSpan = 0
                    }
                    return obj
                }
            }, {
                title: '商品规格',
                width: 200,
                render: (text, record, index) => {
                    console.log(record)
                    return {
                        children: 1,
                        props: {
                        }
                    }

                }
            }, {
                title: '商品ID',
                dataIndex: 'productId'
            }, {
                title: 'SKU ID',
                dataIndex: 'skuId',
            }, {
                title: '单价',
                dataIndex: 'price'
            }, {
                title: '可用库存',
                dataIndex: 'inventory'
            }
        ]
        return columns
    }

代码效果如图,合并了三行以后,原来的第一列的二三行数据也没了

后台返回的数据结构类似这种

list: [
     {  
        "productId": "231212",
        "productName": "百果园商品",
        "skuList": [
            {
                "skuId": "213123",
                "skuName": "规格",                            
                "price": 100,
                "inventory": 10
            }
        ]
     }
]   

我要实现第一列的行合并,合并的单元格个数就是内层数组长度,我这样做又搞不定这个,咋写啊各位大佬们

Answer 1

数据应该要处理成这样，要合并的那几个数据是一样的：

list: [
     {  
        "productId": "231212",
        "productName": "百果园商品",
        "skuId": "213123",
        "skuName": "规格1",                            
        "price": 100,
        "inventory": 10
      
     },
     {  
        "productId": "231212",
        "productName": "百果园商品",
        "skuId": "213124",
        "skuName": "规格2",                            
        "price": 100,
        "inventory": 10
      
     },
     {  
        "productId": "231212",
        "productName": "百果园商品",
        "skuId": "213125",
        "skuName": "规格3",                            
        "price": 100,
        "inventory": 10
      
     }
]