关于前端:elform对象的对象对象的数组对象验证-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>