React实现一个添加商品规格SKU，生成合并表格的功能

此组件为参考一下demo所实现，也非常感谢写这边资料的作者

blog.csdn.net/liu27th/art…

采用框架：antd

1.实现效果

正文： 最近研究了SKU很久，但是一直在合并表格，处理数据这一块卡住了，下面我们先来看一下我们要实现的效果图

上面这一块添加规格还有，添加规格值，我这边就忽略不讲了，比较简单

主要的话就是合并表格这一块，具体是怎么实现的

2.商品规格数据结构

先来看一下我们添加规格和规格值之后的数据格式如下：

specList = [{name: '颜色',children: [{name: '黄色',name: '绿色'}]},{name: '尺寸',children: [{name: 'XL'},{name: 'XXL'}]}]

这里就是我添加了商品规格还有商品规格值之后的数据结构，这个时候我们就要想怎么才能把这个数据渲染成下面这个表格

思路： 首先我们得先拿到每个规格下面的规格值，然后通过笛卡尔积运算（这里的笛卡尔积有不懂的同学，可以自行百度一下）我们的SPECLIST转化成如下的数据格式：

3.转换之后的数据结构

[[{name: '黄色',name: 'XL'}],[{name: '黄色'},{name: 'XXL'}],[{name: '绿色'},{name: 'XL'}],[{name: '绿色'},{name: 'XXL'}]]

可能有的同学会看的比较吃力，下面我就写的更简单一点：

将

[['黄色','绿色'],['XL','XXL']]

格式转换为

[['黄色','XL'],['黄色','XXL'],['绿色','XL'],['黄色','XXL']]

4.数据转换代码

转换代码如下： (可能会有BUG，有发现BUG的同学可以即时沟通)

arrp(arr) {
    //编辑原数组格式
    if (arr[0].children) {
        arr = arr.map((item) => {
            return item = item.children
        })
    }
    if (arr.length === 1) {
        //最终合并成一个
        return arr[0];
    } else {	//有两个子数组就合并
        let arrySon = [];
        //将组合放到新数组中
        arr[0].forEach((_, index) => {
            arr[1].forEach((_, index1) => {
                arrySon.push([].concat(arr[0][index], arr[1][index1]));
            })
        })
        // 新数组并入原数组,去除合并的前两个数组
        arr[0] = arrySon;
        arr.splice(1, 1);
        // 递归
        return this.arrp(arr);
    }
}

下面就是对我们转换后的数据进行渲染，还有最重要的一步就是计算rowSpan,td所需要合并的单元格

5.计算单元格数

计算td所需要合并的单元格数量，代码如下:

let arr = this.state.specificationList
// 对数据进行过滤，规格名称不为空，且规格值列表大于0
arr = arr.filter(ls => ls.name && ls.children.length > 0)
if (arr.length <= 0) { return }
// 对数据进行转换
let res = this.arrp(arr)
// 合并单元格
let row = [];
let rowspan = res.length;
// 通过循环，我们获得td所占的rowSpan 所需要的合并的单元格数
for (let n = 0; n < arr.length; n++) {
    row[n] = parseInt(rowspan / arr[n].children.length)
    rowspan = row[n]
}

6.对表格数据进行渲染

接下来就是对表格数据进行渲染：

// 对表格数据进行渲染
const tdRow = i => arr.map((_, j) => {
    let td;
    if (i % row[j] === 0 && row[j] > 1) {
        td = <td rowSpan={row[j]} key={j}>{res[i][j].name}</td>
    } else if (row[j] === 1) {
        res[i] instanceof Array ? td = <td key={j}>{res[i][j].name}</td> : td = <td key={j}>{res[i].name}</td>
    }
    return td
})
return (
    <div className="table-content">
        <table className="spec-table">
            <thead>
                <tr>
                    {
                        arr.map((th, k) => {
                            return <th key={k}>{th.name}</th>
                        })
                    }
                    <th>SKU编码</th>
                    <th>单买价格</th>
                    <th>拼团价格</th>
                    <th>服务佣金</th>
                    <th>可售库存</th>
                </tr>
                {
                    res.map((_, i) => {
                        return (
                            <tr key={i}>
                                {
                                    tdRow(i)
                                }
                                <td><Input /></td>
                                <td><Input /></td>
                                <td><Input /></td>
                                <td><Input /></td>
                                <td><Input style={{ width: 130 }} /></td>
                            </tr>
                        )
                    })
                }
            </thead>
        </table>
    </div>
)

一个大概的商品规格SKU添加的功能大概就差不多了，后面的话还有对表单数据进行处理，大家可以自行研究。