element ui动态渲染表单（数组）并验证

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绑定的内容不能写错）

最终效果图：