This component is implemented by reference to the demo, and many thanks to the authors who wrote this material

Blog.csdn.net/liu27th/art…

Framework: ANTD

1. Achieve results

Body: RECENTLY we have been studying SKU for a long time, but we have been stuck in merging tables and processing data. Let’s take a look at the effect diagram we want to implement

This one up here, add the specification and add the specification value, which I’m going to ignore, it’s a little bit easier

The main words is to merge the table this piece, is how to achieve

2. Commodity specification data structure

Let’s take a look at the following data format after we add the specification and the specification value:

SpecList = [{name: 'color', children: [{name: 'yellow' name: 'green'}]}, {name: "size", the children: [{name: "XL"}, {name: 'XXL'}]}]Copy the code

Here is the data structure after I add the item specification and the item specification value, and at this point we need to think how can we render this data into the following table

Cartesian product operation

3. Data structure after transformation

[[{name: 'yellow' name: 'XL'}], [{name: 'yellow'}, {name: 'XXL'}], [{name: "green"}, {name: 'XL'}], [{name: "green"}, {name: 'XXL'}]]

Some students may find it difficult to read, so I’ll write it more simply:

will

[[' XL','XXL']]

Format conversion to

[[' yellow ', 'XL'], [' yellow ', 'XXL'], [' green 'and' XL '], [' yellow ', 'XXL]]

4. Data conversion code

The conversion code is as follows: (There may be bugs, students who find bugs can communicate immediately)

Arrp (arr) {// Edit the original array formatif (arr[0].children) {
        arr = arr.map((item) => {
            return item = item.children
        })
    }
    if(arr. Length === 1) {// Finally merge into onereturn arr[0];
    } else{// Merge if there are two subarraysletarrySon = []; / / will be combined into the new array arr. [0] forEach ((_, index) = > {arr. [1] forEach ((_, index1) = > {arrySon. Push ([] concat (arr [0] [index], arr[1][index1])); Arr [0] = arrySon; arr[0] = arrySon; arr.splice(1, 1); / / recursionreturnthis.arrp(arr); }}Copy the code

The next step is to render our transformed data, and the most important step is to calculate the cells that rowSpan, TD needs to merge

5. Count cells

To calculate the number of cells that TD needs to merge, the code is as follows:

letArr = this. State. SpecificationList / / the data filtering, specification name is empty, Arr = arr.filter(ls => ls.name && ls.children. Length > 0)if (arr.length <= 0) { return} // Convert the dataletRes = this.arrp(arr) // Merge cellslet row = [];
letrowspan = res.length; // Through the loop, we get the number of combined cells required for the rowSpan occupied by TDfor (let n = 0; n < arr.length; n++) {
    row[n] = parseInt(rowspan / arr[n].children.length)
    rowspan = row[n]
}
Copy the code

6. Render the table data

Next, render the table data:

Const tdRow = I => arr.map((_, j) => {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 code < / th > < th > single buy price < / th > < th > spelling regiment price < / th > < th > service commission < / th > < th > available inventory < / 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>
)
Copy the code

A general specification of the product SKU added functionality is probably about the same, then there is the form data processing, you can explore.