element UI —— form表单点击一次添加一行和删除一行

form表单点击一次添加一行和删除一行

1、效果图

2、代码

结构

<el-row
        v-for="(item, index) in ruleForms.items"
        :key="index"
        style="margin-left: 0.5vw"
        >
    <el-col :span="22">
        <el-form
                 :rules="rules"
                 :inline="true"
                 :model="formInline"
                 class="demo-ruleForm"
                 ref="formInline"
                 >
            <!-- style="color: #f89595; verticle-align: middle" -->
            <!-- <span class="star"></span> -->
            <el-form-item label="实体属性">
                <el-select
                           v-model="formInline.attributeName"
                           placeholder="请选择属性"
                           style="width: 14.5vw"
                           >
                    <el-option label="字符串" value="shanghai"></el-option>
                    <el-option label="文本" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input
                          v-model="formInline.attributeValues"
                          placeholder="请输入属性值"
                          style="width: 15vw"
                          ></el-input>
            </el-form-item>
        </el-form>
        <!-- <div style="margin-left: 4.5vw">

<div
style="
border: 1px dashed #999;
margin-top: 10px;
margin-bottom: 20px;
"
></div>
</el-form>
</div> -->
    </el-col>
    <el-col :span="2">
        <i
           class="el-icon-circle-plus-outline"
           type="danger"
           v-if="index == 0"
           style="font-size: 30px; color: #67c23a; margin-right: 5px"
           @click="addItem"
           ></i>
        <i
           class="el-icon-remove-outline"
           type="danger"
           v-if="index != 0"
           style="font-size: 30px; color: #f56c6c"
           @click="del(index)"
           ></i>
    </el-col>
</el-row>

数据

data() {
    return {
      formInline: {
        attributeName: "",
        attributeValues: "",
      },
        ruleForms: { items: [{}] },
    };
},
methods: {
    addItem() {
        // this.i += 1;
        this.ruleForms.items.push({
            date: '',
            material: '', //素材包
            app: ''
        });
        // console.log(this.i);
    },
    // 删除
    del(index) {
        this.ruleForms.items.splice(index, 1);
    }
},