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

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

1. 添加一个按钮用于打开模态框
   <el-button type="primary" @click="handleSkuProperties">SKU属性</el-button>
2. 设计一个组件用于动态添加表单，我这儿使用的是模态框。里面是卡片和表格处理数据

<!--SKU属性维护的模态框-->
        <el-dialog title="SKU属性管理" :visible.sync="skuDialogVisible" width="60%">
            <!--卡片     外层的卡片代表者一个sku属性-->
            <el-card class="box-card" v-for="skuProperty in skuProperties" style="margin-bottom: 5px">
                <!--内层的div代表sku属性的选项-->
                <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]">
                    <!--更改价格和库存单元格和标题-->
                    <el-table-column v-if="key=='price'" :prop="key" label="价格">
                        <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="库存">
                        <template scope="scope">
                            <el-input v-model="scope.row.availableStock"></el-input>
                        </template>
                    </el-table-column>
                    <!--隐藏sku_index属性-->
                    <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">取 消</el-button>
                <el-button type="primary" @click="subSkuProperties">确 定</el-button>
          </span>
        </el-dialog>

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微服务的系统的商品模块里面，有这个的完整实现，包括数据库