Element循环生成的表单如何添加校验规则

数据结构

let ruleForm = ref({
  List: [
    {
      deviceName: "", //设备名称
      tagName: "" //标签名称
    }
  ],
  remark: "" //备注
}); //表单参数

表单校验规则

const rules = {
  deviceName: [
    { required: true, message: "请选择设备名称", trigger: "change" }
  ],
  tagName: [{ required: true, message: "请选择标签名称", trigger: "change" }],
  remark: [{ required: true, message: "请输入备注", trigger: "change" }]
}; //表单校验规则

页面结构

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
    >
      <!-- 需要循环的表单 -->
      <div v-for="(item, index) in ruleForm.List" :key="index">
        <el-form-item
          label="设备名称"
          :prop="'List.' + index + '.deviceName'"
          :rules="rules.deviceName"
        >
          <el-input v-model="item.deviceName" placeholder="请输入设备名称"
        /></el-form-item>
        <el-form-item
          label="标签名称"
          :prop="'List.' + index + '.tagName'"
          :rules="rules.tagName"
        >
          <el-input v-model="item.tagName" placeholder="请输入标签名称"
        /></el-form-item>
      </div>
      <!-- 无需循环的表单 -->
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="ruleForm.remark"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

 

重点

在el-form-item标签上按照以下结构添加

 :prop="'List.' + index + '.deviceName'"
 :rules="rules.deviceName"