在使用elementUI动态添加表单项并添加验证的时候踩了一些坑,在此记录一下
代码:
<el-form :label-position="labelPosition" :ref="form" :model="form" label-width="120px" :inline="true" style="overflow: hidden;margin-left: 180px;margin-top: 30px">
<el-col :span="14">
<el-form-item label="采购类型:" prop="goods_type" :rules="rules.goods_type">
<el-select v-model="form.goods_type" placeholder="请选择" @change="queryApprove" >
<el-option v-for="option in typeOptions" :key="option.Value" :label="option.Text" :value="option.Value"></el-option>
</el-select>
</el-form-item>
<div v-for="(item,index) in form.purchase_list">
<el-form-item label="物品名称:" prop="goods_type" :rules="rules.goods_type">
<el-select v-model="item.goods_name" placeholder="请选择" @change="queryApprove" >
<el-option v-for="option in typeOptions" :key="option.Value" :label="option.Text" :value="option.Value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="text" style="margin-left:190px" @click="deleteItems(item, index)" icon="el-icon-delete" v-show="index>0" >删除</el-button>
</el-form-item>
<el-form-item label="物品单价:" :prop="'purchase_list.'+index +'.goods_price'" :rules="rules.goods_price">
<el-input-number :min="0.1" v-model="item.goods_price"></el-input-number>
</el-form-item>
<el-form-item label="数量:" :prop="'purchase_list.'+index +'.goods_qty'" :rules="rules.goods_qty">
<el-input-number :min="1" v-model="item.goods_qty"></el-input-number>
</el-form-item>
</div>
<el-form-item>
<el-button type="text" @click="addItem" style="position: relative;left:120px"><i class="el-icon-circle-plus"></i>新增采购物品</el-button>
</el-form-item>
<el-form-item label="采购事由:" prop="purchase_reason" :rules="rules.purchase_reason" style="display:block;">
<el-input type="textarea" :rows="4" v-model="form.purchase_reason" placeholder="请输入申请理由" style="width: 493px" ></el-input>
</el-form-item>
<el-form-item label="审批人:" prop="approve_person" :rules="rules.approve_person">
<el-select v-model="form.approve_person" placeholder="请选择" >
<el-option v-for="item in approveOptions" :key="item.PersonId" :label="item.Name" :value="item.PersonId"></el-option>
</el-select>
</el-form-item>
<el-form-item style="display: block;position: relative;left:120px">
<el-button class="submit-button" @click="submitForm(form)">提交</el-button>
</el-form-item>
</el-col>
</el-form>
数据部分:
form: {
goods_type:'',
purchase_list:[{
goods_name:'',
goods_price:'',
goods_qty:''
}],
purchase_reason: '',
approve_person:''
},
表单验证:
rules: {
goods_name: [
{required: true, message: '请输入采购物品名称', trigger: 'blur' }
],
goods_type: [
{ required: true, message: '请选择采购物品类型', trigger: 'change' }
],
purchase_reason: [
{ required: true, message: '请输入采购事由', trigger: 'blur' },
{ min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
],
goods_price:[
{ required: true, message: '请输入采购物品单价'},
],
goods_qty:[
{ required: true, message: '请输入采购物品数量'},
],
approve_person:[
{required: true, message: '请选择审批人', trigger: 'change'}
]
}
部分方法:
/*动态新增表单项*/
addItem(){
this.form.purchase_list.push({
goods_name:'',
goods_price:'',
goods_qty:''
})
},
/*删除新增的表单项*/
deleteItems(item, index) {
this.index = this.form.purchase_list.indexOf(item);
if (index !== -1) {
this.form.purchase_list.splice(index, 1)
}
},
由于原页面是没有动态添加表单项的,在做验证的时候踩了一些坑。
首先,这里需要把prop改成:prop并且添加内容,例如::prop="‘purchase_list.’+index +’.goods_price’" ,其中第一个参数为被循环的数组的名称,第二个参数为数组中对应的字段名称
这里注意,需要动态添加的表单项与正常表单项做验证有区别,普通表单只需要在el-form标签中指定:rules同时每个表单项的prop与验证规则中的名称一致即可。但是动态添加的表单项需要将:rules单独放在el-form-item标签中,我是直接将所有的验证都放在了el-form-item标签中,为了美观。具体代码可以参考上文