目录
背景
有的需求不固定form表单中存在什么,而是通过接口内容进行查询后赋值,这种情况就涉及了每一个el-form-item的动态校验问题,在这种情况下想要校验自动出现必填标识,未填写时可以在输入框下面进行提示。
解决方案
数据格式
此处拿下面数据结构进行下面代码的演示,使用时根据各自需求进行优化
data: {
return: {
form: {
data: [
{
value: '', // form绑定值
name: 'form-1', // form label值
isNull: '1', // 是否必填 1- 必填, 2-非必填
}
]
}
}
}
使用方式
html中:
<el-form ref="form" :model="form" label-position="left" label-width="140px">
<div v-for="(item, index) in form.data" :key="index">
<el-form-item
:label='item.name'
:prop="`data.${index}.value`"
class="mb-20"
:rules="item.isNull ? {
required: true, message: `请输入${item.name}`, trigger: 'blur'} : {}">
<el-input v-model="item.value" placeholder="请输入"/>
</el-form-item>
</div>
</el-form>