vue element 关于表单数组循环、对象数据校验

1、模拟数据：

格式：对象中嵌套数组，数组中嵌套对象

data() {
  return {
     fromData: {
       name: '',
info: {
age: '' 
}
       sizeData: [
{
goods_sn: '',
size: ｛
type: ''
｝
}
],
    }            
  }  
}

2、html中循环输出

<el-form :model="fromData" :rules="rules" ref="ruleForm" label-width="120px" class="ruleForm">
 <!-- 常见的检验模式 -->
 <el-form-item label="活动名称" prop="name" required>
<el-input v-model="fromData.name" autocomplete="off" ></el-input>
 　</el-form-item>

　　<el-form-item label="活动信息" prop="info.age" required>
<el-input v-model="fromData.info.age" autocomplete="off" ></el-input>
 　</el-form-item>

<!-- 嵌套循环检验模式 -->
<div v-for="(item, index) in fromData.sizeData" :key="index + '_size'" class="clearfix mt24">

　　　　<el-form-item class="fl" label="虚拟SKU" :prop="'sizeData.' + index + '.goods_sn'" :rules="sizeData.goods_sn" required>

　　　　　　<el-input v-model="item.goods_sn" autocomplete="off" placeholder="请输入SKU" ></el-input>

　　　　</el-form-item>

　　　　<el-form-item class="fl" label="尺寸规格" :prop="'sizeData.' + index + '.size.type'" :rules="sizeData.size_type" required>

　　　　　　<el-input v-model="item.size.type" autocomplete="off" placeholder="请选择尺寸值，用英文逗号分隔" ></el-input>

　　　　</el-form-item>

　　 </div>

　</el-form>

　(1)、常见的检验模式：即element文档给出的实例，格式通常是个单层对象　

let obj = { 
   name: 'cp_cookie',
inof: {
age: ''
}
}
// html 中的写法， 不能自定义键名，可以点字符串
// 1、简单键值对
prop="name"
// 2、简单对象
prop="inof.age" 

　(2)、嵌套数组循环校验模式：多层嵌套结构

let obj = { 
  sizeData: [ 
     { 
        goods_sn: '' ,
        size: {
type: ''
 }
      }
   ] 
}

// html 中的写法，自定义的prop，注意前面的冒号：不能缺少
// 1、数组校验
:prop="'sizeData.' + index + '.goods_sn'" :rules="sizeData.goods_sn"
// 2、对象校验， 这里可以自定义键名（同上）
:prop="'sizeData.' + index + '.size.type'" :rules="sizeData.size_type"

注：这里与普通写法不同，因为要校验每条数据，因此必须一一定义，并重新定义检验rules名(如：sizeData)，如果多层可以另起一个自定义

3、校验方法

data() {
// 普通单层校验
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: ['change', 'blur'] }
]
"info.age": [  // 点字符串键名
{ required: true, message: '请输入活动信息', trigger: ['change', 'blur'] }
]
},

　　// 嵌套多层数据校验，如果有多层，可以单独再定义rules名，如下


　　sizeData: {
goods_sn: [
{ required: true, message: '请输入SKU', trigger: ['change', 'blur'] },
{ validator: validateSku, trigger: ['change', 'blur'] }   // validateSku自定义检验规则，这不用介绍了
],
size_type: [  // 自定义键名
{ required: true, message: '请选择尺寸值，用英文逗号分隔', trigger: ['change', 'blur'] }
]
}
}

注：这里踩了个坑，就是检验清空输入框会出现代码英文提示，这里最好就是将触发的多个事件名都写上，这样就只会出现我们自定义的提示
   trigger: ['change', 'blur']