element+vue实现界面动态添加表单

首先，要确保你的开发环境是vue+element框架。然后就可以开始了

1. 添加一个按钮用于打开模态框
   SKU属性
2. 设计一个组件用于动态添加表单，我这儿使用的是模态框。里面是卡片和表格处理数据

        
            
            
                
                

                    {{skuProperty.specName}}
                
                

                    
                    
                
            
            
                
                
            
            
                取 消
                确 定
          
        

3. 在data(){}里面添加数据源和模态框的控制属性
   skuDialogVisible: false,//sku属性模态框 skuProperties: []
4. 数据源的数据自行通过后台获取，也可以界面把数据写死了，测试一下看看界面展示对不对。这里给出测试数据，看是否动态搭配属性值

skuProperties = [
        {
            "specName": "肤色",
            "options": ["黑色", "黄色"]
        },
        {
            "specName": "年龄",
            "options": ["萝莉", "御姐"]
        },{
            "specName": "体型",
            "options": ["腿长1米8", "身高1米5"]
        }]

这里是动态监听事件，最重要的一环，通过动态监听事件以及reduce方法，可以达到在模态框上输入数值，然后自动搭配显示结果组成表格的效果

watch: {
            skuProperties: {//深度监听，可监听到对象、数组的变化
                handler(val, oldVal) {
                    //动态生成skus值
                    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;
                    }, [{}])

                    //添加价格
                    res.forEach(e1 => {
                        e1.price = 0;
                        e1.availableStock = 0;
                        e1.sku_index = e1.sku_index.substring(1);
                    })

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

若是这个看不懂的话，还可以下载我的源码基于springCloud微服务的系统的商品模块里面，有这个的完整实现，包括数据库