el-form表单验证 深层次对象验证解决方法

问题描述

有时我们想要在表单里验证更深层次的对象，普通的验证写法已无法实现

解决方法

HTML代码:

关键代码：

<div class="elCollapse" v-for="(item, index) in information.list" :key="index">
<el-form-item :rules="formRules.name" :prop="`list.${index}.name`">

<el-form ref="form" :rules="formRules" label-position="top" label-width="80px" :model="information" :hide-required-asterisk="true">
    <div class="elCollapse" v-for="(item, index) in information.list" :key="index">
      <el-collapse v-model="activeNames" @change="collapseChange" accordion>
        <el-collapse-item title="点击此处进行登记" :name="index">
          <el-form-item :rules="formRules.name" :prop="`list.${index}.name`">
            <span slot="label">
              <span style="font-weight:bold">姓名</span>
              <span style="color:#ea7d7d">(必填项)</span>
            </span>
            <el-input placeholder="请输入姓名" v-model="item.name" maxlength="10"></el-input>
          </el-form-item>
          </el-collapse-item>
      </el-collapse>
    </div>
</el-form>

js代码:

information: {
	list: [
		{
			name: ''
		}
	],
},
formRules: {
	name: [
		{ required: true, message: '请填写姓名', trigger: 'blur' }
	],
},