element ui动态渲染表单(数组)并验证
1、需求:
点击编辑按钮,弹出编辑框(表单),从后端拿到字段后动态渲染到页面上,并校验必填
效果图:(图中 源端-*、操作、处理意见这几个label都是后端拿到的,里面对应的options也是后端拿到的)
以下代码仅写了"操作"这一个label
2、代码实现
其中:specialColumns是从后端拿到的json数组,格式如下:
[
{
columnName: "操作"
columnType: "enumeration"
columnValue: "再次上报,废弃"
controlId: "FormProperty_08tc63f"
}
]
然后:
1:temp:指经过处理的【再次上报,废弃】数组
2:tempValue:指对应选择框的options
注意:prop的写法 :prop="'processColumns['+i+'].userValue'"
<el-dialog :visible.sync="editContent" title="编辑" @close="closeDialog">
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
<el-row v-if="tempFlag" :gutter="16">
<el-col v-for="(item,i) in temp" :span="12">
<el-form-item :label="item"
:prop="'processColumns['+i+'].userValue'"
:rules="[{ required:true,message:'输入不能为空',trigger: 'change' }]"
:key="i">
<el-select v-model="ruleForm.processColumns[i].userValue"
clearable
placeholder="请选择">
<el-option
v-for="(item,i) in tempValue[i]"
:label="item"
:value="item"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
3、错误情况:input左侧出现星号,内容为空却不提醒**
原因:已经写好了验证功能,但是没有绑定到input框 .
解决方法:是标签加入prop="数组内要验证的属性"或者标签中加入type=“数组内要验证的属性”.如上代码所示(prop绑定的内容不能写错)
最终效果图: