使用el-form时循环内容动态校验处理

目录

背景

解决方案

数据格式

使用方式

---

背景

        有的需求不固定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>