First, make sure that your development environment is the vue+element framework. And then we can start

1. Add a button to open the modal box
   < El button type = "primary" @ Click = "handleskuproperties" > SKU properties < / El button >
2. To design a component for dynamically adding forms, I use the modal box here. There are cards and tables processing data

<!--SKU Modal box for attribute maintenance-->
        <el-dialog title="SKU Attribute management" :visible.sync="skuDialogVisible" width="60%">
            <!--card     The outer card represents a sku attribute-->
            <el-card class="box-card" v-for="skuProperty in skuProperties" style="margin-bottom: 5px">
                <!--Inner layer div representative sku Options for properties-->
                <div slot="header" class="clearfix">
                    <span>{{skuProperty.specName}}</span>
                </div>
                <div v-for="index in skuProperty.options.length+1" :key="index" class="text item">
                    <el-input v-model="skuProperty.options[index-1]" style="width:80%"></el-input>
                    <el-button icon="el-icon-delete" @click="skuProperty.options.splice(index-1,1)"
                               style="width:10%"></el-button>
                </div>
            </el-card>
            <el-table :data="skus" border style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <template v-for="(value,key) in skus[0]">
                    <!--Change price and stock cells and headers-->
                    <el-table-column v-if="key=='price'" :prop="key" label="Price">
                        <template scope="scope">
                            <el-input v-model="scope.row.price"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="key=='availableStock'" :prop="key" label="Stock">
                        <template scope="scope">
                            <el-input v-model="scope.row.availableStock"></el-input>
                        </template>
                    </el-table-column>
                    <!--hide sku_index attribute-->
                    <el-table-column v-else-if="key!='sku_index'" :prop="key" :label="key">
                    </el-table-column>
                </template>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="skuDialogVisible = false">Cancellation</el-button>
                <el-button type="primary" @click="subSkuProperties">Determine</el-button>
          </span>
        </el-dialog>

1. Add control attributes of data source and modal box in data() {}
   skuDialogVisible: false,//sku property modal box skuProperties: []
2. The data of the data source can be obtained by itself through the background, or the interface can write the data to death. Test to see if the interface display is correct. Here is the test data to see whether to match the attribute values dynamically

skuProperties = [
        {
            "specName": "Skin colour",
            "options": ["black", "yellow"]
        },
        {
            "specName": "Age",
            "options": ["Lolita", "Domineering lady"]
        },{
            "specName": "shape",
            "options": ["Leg length 1 meters 8", "Height 1 m 5"]
        }]

This is the most important part of the dynamic monitoring event. Through the dynamic monitoring event and reduce method, you can enter values in the mode box, and then automatically match the results to form a table

watch: {
            skuProperties: {//Deep monitoring can monitor the changes of objects and arrays
                handler(val, oldVal) {
                    //Dynamically generate skus values
                    let res = this.skuProperties.reduce((pre, cur) => {
                        let result = [];
                        pre.forEach(e1 => {
                            e1.sku_index = (e1.sku_index || '') + "_";
                            for (let i = 0; i < cur.options.length; i++) {
                                let e2 = cur.options[i];
                                let temp = {}
                                Object.assign(temp, e1);
                                temp[cur.specName] = e2;
                                temp.sku_index += i;
                                result.push(temp);
                            }
                        })
                        return result;
                    }, [{}])

                    //Add price
                    res.forEach(e1 => {
                        e1.price = 0;
                        e1.availableStock = 0;
                        e1.sku_index = e1.sku_index.substring(1);
                    })

                    this.skus = res;
                },
                deep: true
            }
        }

If you don't understand this, you can also download my source code based on the commodity module of the springCloud microservice system, which has a complete implementation of this, including the database