美文网首页
el-form里对象和数组的rules校验

el-form里对象和数组的rules校验

作者: Frank_Fang | 来源:发表于2023-02-14 17:40 被阅读0次

对象

// template
<el-form ref="form" :model="dataForm" :rules="dataFormRules">
  <el-form-item label="file" prop="file.name" :rules="dataRule.file">
    <el-upload ...></el-upload>
  </el-form-item>
</el-form>

// script
dataForm: {
  file: { name: '1', ... }
}

dataRule: {
  file: { required: true, message: '请输入', trigger: 'blur'}
}

数组

// template
<el-form ref="form" :model="dataForm" :rules="dataFormRules">
  <el-form-item v-for="(item,index) in dataForm.list" :key="index" :label="item.name" :prop="`list[${index}].value`" :rules="dataRule.list">
    <el-input v-model="dataForm.list[index].value"></el-input>
  </el-form-item>
</el-form>

// script
dataForm: {
  list: [
    {id: '1', name: '1', value: ''},
    {id: '2', name: '2', value: ''},
    {id: '3', name: '3', value: ''}
  ]
}

dataRule: {
  list: { required: true, message: '请输入', trigger: 'blur'}
}

相关文章