el-form动态校验表单

只差亿点点

已于 2022-12-01 09:59:38 修改

阅读量3k

点赞数 1

分类专栏：解决小bug 文章标签：前端 javascript vue.js

于 2022-09-28 01:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_67898309/article/details/127073594

版权

解决小bug 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动态表单根据点击出现任意表单，如姓名，电话，地址，国籍等。

返回表单数据数组格式大致如下：

[{code:idCard,name:身份证号；requireChecked:true;},

{code:address,name:地址；requireChecked:false;}

..........]

当requireChecked为true时，代表选中会进行表单渲染

代码如下：

1-v-for循环数组

2-校验判断

3-双向绑定

<el-form ref="form" :model="insuredParamsForm" label-width="auto" label-position="left">
                  <el-form-item
                    :label="item.name"
                    v-for="item in insuredParamsArr"
                    :key="item.code"
                    :prop="item.code"
                    :rules="[{ required: item.requireChecked, message: `请输入${item.name}`, trigger: 'blur' }]"
                  >
                    <el-input v-model="insuredParamsForm[item.code]" style="font-size: 32px; height: 60px"></el-input>
                  </el-form-item>