vue动态添加类名_vue+element动态添加表单项并添加验证

1.部分template

<el-form-item label="过滤设定" style="margin-bottom:0px;">
<template>
<div @click="addGuolv" class="addGuolv">+ 添加</div>
<div v-for="(item,index) in resourceForm.criteriaList" class="performanceNameList">
<div class="item-piece">
<div ref="items" style="display: flex;flex-direction:row;">
<el-form-item :prop="'criteriaList.'+index+'.criColumn'"
:rules="[{required: true, message: '请完善信息',trigger:'change'}]"
style="flex:1.5;margin-top:0px;">
<el-select
v-model="item.criColumn"
filterable
placeholder="字段选择"
clearable
@change="criColumnHandle($event,index)"
style="width:100%">
<el-option
v-for="item in resourceFields"
:key="item.name"
:value="item.name"
:label="item.comment"></el-option>
</el-select>
</el-form-item>
<el-form-item :prop="'criteriaList.'+index+'.criComparType'"
:rules="[{required: true, message: '请完善信息'}]"
style="flex:0.5;margin-top:0px;">
<el-select
v-model="item.criComparType"
placeholder="比较符"
clearable
@change="comparTypeHandle($event,index)">
<el-option
v-for="item in compares"
:key="item.id"
:value="item.id"
:label="item.dicName"></el-option>
</el-select>
</el-form-item>
<el-form-item :prop="'criteriaList.'+index+'.criComparValue'"
:rules="[{required: true, message: '请完善信息',trigger:'blur'}]"
style="flex:1;margin-top:0px;">
<el-input v-model="item.criComparValue"></el-input>
</el-form-item>
<el-form-item
style="flex:0.5;margin-top:0px;">
<el-select
v-model="item.criRelation">
<el-option label="并且" value="and"></el-option>
<el-option label="或者" value="or"></el-option>
</el-select>
</el-form-item>
</div>
<div class="icons">
<i @click="deleteHandle(index)" class="iconSize remove">
<img src="@/assets/img/zxqj-remove.png"/>
</i>
</div>
</div>
</div>
</template>
</el-form-item>

2.data 表单数据

resourceForm:{
criteriaList:[]
},

3.添加或删除操作

//添加过滤设定
addGuolv(){var jsn={criColumn:'',criComparType:'',criComparValue:'',criRelation:'and'};this.resourceForm.criteriaList.push(jsn)
},
//删除过滤设定
deleteHandle(index){this.resourceForm.criteriaList.splice(index,1);
},