动态表单 + 校验

57 阅读1分钟
data()
reviewPerson: {
    reviewPersonForm: [
      {
        keyNameCh: '部门经理',
        keyNameEn: 'managerIdList',
        isRequired: true,
        value: undefined
      }
    ]
}

html
<el-form
  ref="reviewerForm"
  :model="reviewPerson"
  :rules="rules"
  label-width="100px">
  <el-row :gutter="10">
    <el-col :span="12" v-for="(item, index) in reviewPerson.reviewPersonForm" :key="item.keyNameEn">
      <el-form-item :label="item.keyNameCh" :prop="'reviewPersonForm.' + index +'.value'"
                    :rules="[{required: !!item.isRequired, message: `请输入${item.keyNameCh}`, trigger: 'blur'}]">
            <el-input v-model="item.value" type="text"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

// 单个校验
this.$refs.reviewerForm.validateField([`reviewPersonForm.${index}.value`], valid => {})