vue+element ui 对表单中数组元素中的属性深度校验 或者对对象的数组深度校验

el-form-item里边的el-table

<el-form-item  prop="aaa" >
          <el-table
            v-loading="loading"
            :data="form.xxx"
            :row-style="{height: '80px'}"
            :cell-style="{'text-align':'center'}"
            border
          >
            <el-table-column
              label="xx"
              prop="one"
              :show-overflow-tooltip="true"
              width="238"
              :render-header="addRedStar"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-form-item  :prop="`aaa[${scope.$index}].one`" :rules="rules.one" >
                <el-input
                  :controls="false"
                  style="width: 170px"
                  v-model="scope.row.one"
                  placeholder="请输入"
                >
                </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            </el-form-item>

示例

<el-form-item  prop="projectEntprs" >
          <el-table
            v-loading="loading"
            :data="form.projectEntprs"
            :row-style="{height: '80px'}"
            :cell-style="{'text-align':'center'}"
            border
          >
            <el-table-column
              label="企业名称"
              prop="entprName"
              :show-overflow-tooltip="true"
              width="238"
              :render-header="addRedStar"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-form-item  :prop="`projectEntprs[${scope.$index}].entprName`" :rules="rules.entprName" >
                <el-input
                  :controls="false"
                  style="width: 170px"
                  v-model="scope.row.entprName"
                  placeholder="请输入"
                >
                </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="类型"
              prop="type"
              :show-overflow-tooltip="true"
              width="250"
              :render-header="addRedStar"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-form-item  :prop="`projectEntprs[${scope.$index}].type`" :rules="rules.type" >
                  <el-radio-group
                    v-model="scope.row.type"
                    style="display: flex; flex-direction: row"
                  >
                    <el-radio
                      v-for="dict in dict.type.yed_enter_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                      style="margin: 10px 20px"
                    ></el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="企业授信额度"
              prop="entprGrancQuota"
              :show-overflow-tooltip="true"
              width="200"
              :render-header="addRedStar"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-form-item  :prop="`projectEntprs[${scope.$index}].entprGrancQuota`" :rules="rules.entprGrancQuota" >
                  <el-input-number
                    :controls="false"
                    style="width: 170px"
                    :min="1"
                    :max="999999999.99"
                    v-model="scope.row.entprGrancQuota"
                  ></el-input-number>
                  <!-- placeholder="请输入" -->
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="联系人"
              prop="contacts"
              :show-overflow-tooltip="true"
              width="200"
              :render-header="addRedStar"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-form-item  :prop="`projectEntprs[${scope.$index}].contacts`" :rules="rules.contacts" >
                  <el-input
                    :controls="false"
                    style="width: 170px"
                    v-model="scope.row.contacts"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="联系电话"
              prop="phone"
              :show-overflow-tooltip="true"
              width="200"
              :render-header="addRedStar"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-form-item  :prop="`projectEntprs[${scope.$index}].phone`" :rules="rules.phone" >
                  <el-input
                    :controls="false"
                    style="width: 170px"
                    v-model="scope.row.phone"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="151"
              align="center"
              class-name="small-padding fixed-width"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  type="text"
                  @click="handleDeletes(scope.row, scope.$index)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

js中数据声明为

form{
	aaa:[
		one:"",
		two:"",
		...
		]
}

示例

form: {
        pageNum: 1,
        pageSize: 10,
        coentprId: null,
        coentprName: null,
        projectName: null,
        projectType: null,
        wrntMode: null,
        bank: null,
        coentprBearPrice: undefined,
        coentprBearUnit: '0',
        bankBearPrice: undefined,
        bankBearUnit: '0',
        status: null,
        isDelete: null,
        createTime: null,
        projectPeriodBegin: null,
        cityId: null,
        provinceId: null,
        countyId: null,
        chargeMode: null,
        riskconMode: [],
        riskconModes: [],
        deliver: "",
        TCoptionsone: [],
        projectEntprs: [
          {
            type:'核心企业'
          }
        ],
        projectFiles: [],
      },

js中规则rules为

 rules: {
        // 关联企业信息
        entprName:[
          { required: true, message: '企业名称不能为空', trigger: 'blur' },
          { min:1,max:5,message: "长度须在1-5之间", trigger: "blur" }
        ],
        // type:[
        // { required: true, message: '请选择类型', trigger: 'change' }
        // ],
        entprGrancQuota:[
        { required: true, type:'number',message: "企业授信额度不能为空", trigger: "blur" },
        {
            type:'number',
            min: 1,
            max: 999999999.99,
            message: "企业授信额度需输入1-999999999.99以内个的字符",
            trigger: "blur",
          },
        ],
        contacts: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
          { min:1,max:10,message: "长度须在1-10之间", trigger: "blur" }
        ],
        phone:[
          { required: true,message: '联系电话不能为空',trigger: 'blur'},
          {
            pattern: /\d{3}-\d{8}|\d{4}-\d{7}|^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$/,
            message: "请输入正确的手机号码或电话，电话用-",
            trigger: "blur"
          }
        ]
       }

效果展示