el-form对象的对象/对象的数组对象验证 & label中的空格

一：提交表单，遇到复杂对象结构的验证，比如说：

示例图

1. 对象中包含一个数组，里面有多个对象

2. 对象中包含一个对象

总结来说：

其他的单纯的对象字段，依旧写在 :rules="rules" 里面，复杂结构的单独写在 el-form-item 标签里

template

/** 对象中的数据对象字段验证
    多余代码省略 & 只验证非空
**/
<div v-for="(item, index) in addForm.cargoList" :key="item.cargoName">
   <el-form-item label="货品名称" :prop="`cargoList[${index}].cargoName`" :rules="[{required: true,message: '不能为空'}]">
       自己封装的组件代码省略...
   </el-form-item>
</div>

template

/** 对象中对象字段验证
    多余代码省略 & 验证非空+validator & 两个相互影响的字段
    其中 TEST_VEHICLE_NO 为车牌验证规则 省略
**/
<el-form-item
  label="车牌号"
  prop="scheduleInfo.vehicleNo"
  :rules="[{required: true,message: '不能为空'},{validator: TEST_VEHICLE_NO, trigger: 'blur'}]"
  class="import-label"
>
   自己封装的组件代码省略...
</el-form-item>
<el-form-item
  label="挂车车牌"
  prop="scheduleInfo.trailerPlateNo"
  :rules="addForm.scheduleInfo.vehicleNo.match(/挂/) ?
          [{required: true,message: '不能为空'},{validator: TEST_VEHICLE_NO, trigger: 'blur'}] :
          null
  "
>
   自己封装的组件代码省略...
</el-form-item>

二： label妙用空格

示例图

为什么会在label中用空格？

图上的样式使用了 <el-row> <el-col :span="数字"></el-col></el-row> 两行相类似的字段组件一致，分配的 width 一致, 但由于上面一行有非空验证，导致上下两行无法对齐，个人备受煎熬。由于组件有长有短，不能等分，空格的妙用就出现了！！

template

<el-col :span="4">
  <el-form-item :label="`\xa0\xa0收货人名称`" prop="consignee">
    自己封装的组件代码省略...
  </el-form-item>
</el-col>