一、实现点击按钮el-button,生成多个el-form-item
思路:循环要多次生成的字段,并把循环后的结果push进一个数组,就能拿到多个相同属性的el-form-item的值。
<template v-for="item in testArray">
<el-row>
<el-col :span="12">
<el-form-item label="类别" prop="type" :rules="typeRules">
<el-select
v-model="item.type"
style="width:80%;"
filterable
clearable
@change="getContext"
>
<el-option
v-for="item in typeOptions"
:key="item.disckey"
:label="item.discname"
:value="item.discname"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="建议" prop="desc" :rules="descRules" >
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 4}"
maxlength="1000"
show-word-limit
v-model="item.desc"
style="width:100%;"
@change="getContext"
></el-input>
</el-form-item>
</el-col>
<el-button style="margin-left: 20px" type="primary" size="small" @click="addM">添加</el-button>
</el-row>
</template>
// 添加
addM(){
this.testArray.push({
type: '',
desc: ''
})
},
可以打印 testArray 测试一下,还有就是要注意,需要循环的字段是否最少要保留一个,可以在删除时作下判断。
<el-button style="margin-left: 20px" type="danger" size="small" @click="deleM">删除</el-button>
// 删除措施
deleM(){
if(this.testArray.length > 1){
this.testArray.pop({
type: '',
desc: ''
})
}else{
this.$alert('最后一个无法删除!', '提示信息', {
confirmButtonText: '确定'
});
}
},
二、对el-form-item单独设置表单校验规则
如上部分的html代码
<el-form-item label="类别" prop="type" :rules="typeRules">
</el-form-item>
<el-form-item label="建议" prop="desc" :rules="descRules">
</el-form-item>
data(){
return {
// 类别校验
typeRules: [{
required: true,
message: '类别不能为空',
trigger: 'blur'
}],
// 建议校验
descRules: [{
required: true,
message: '建议不能为空',
trigger: 'blur'
}],
}
}
直接在对应字段的el-form-item上绑定校验规则。
希望以上不止对自己有帮助———加油(ง •_•)ง