vue+element ui实现动态增加商品sku

实现逻辑（循环遍历数组，通过push来增加属性，通过splice移出属性）

html

<div>
 				   <el-row class="catySet">
                        <el-col :span="6">
                            属性名称
                        </el-col>
                        <el-col :span="18">
                            属性值
                        </el-col>
                    </el-row>
                    <el-row class="catySet" v-for="(item,index) in attribute" :key="index">
                        <el-col :span="6">
                            <el-input v-model="item.name"></el-input>
                            <span class="delete" @click="delAttr(index)">-</span>
                            <span class="delete" v-if="index===attribute.length-1" @click="addAttr">+</span>
                        </el-col>
                        <el-col :span="18">
                            <span v-for="(items,indexs) in item.value"  class="attrValue">
                            <el-input v-model="items.name" :key="indexs"></el-input>                                <span class="delete" @click="delAttrList(item.value,indexs)">-</span>
                             </span>
                            <span class="delete" @click="addAttrList(item.value)">+</span>
                        </el-col>
                    </el-row>
</div>

js

data(){
return{
	     attribute: [
                    {
                        name: "",
                        value: [{
                            name: ""
                        }]
                    }
                ]
}
},
methods:{
			/*添加属性*/
            addAttr() {
                this.attribute.push({name: "", value: [{name: ""}]})
            },
            /*移除属性*/
            delAttr(index) {
                if (this.attribute.length === 1) {
                    this.$message({
                        message: "至少设置一个属性",
                        type: "warning"
                    })
                } else {
                    this.attribute.splice(index, 1);
                }
            },
            /*删除属性的某个值*/
            delAttrList(items, indexs) {
                if (items.length === 1) {
                    this.$message({
                        message: "至少设置一个属性值",
                        type: "warning"
                    })
                } else {
                    items.splice(indexs, 1);
                }
            },
            /*增加属性的某个值*/
            addAttrList(item) {
                item.push({name: ""})
            }
}

css

    .catySet {
        margin-left: 40px;
        font-size: 13px;
        font-weight: 600;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .catySet .el-col .el-input {
        width: 150px;
    }

    .attrValue {
        margin-right: 20px;
    }

    .attrValue .el-input {
        margin-bottom: 10px;
    }

    .delete {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: #1989FA;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        line-height: 24px;
        font-size: 24px;
        cursor: pointer;
    }