记一种解决element ui嵌套数据验证的方法

相信很多人（别抬杠）都在使用Vue（2.x）+Element UI 组合方式开发项目，很好，有了这个前提，咱继续。

通常，使用Element 表单，数据和校验的用法类似这样

// 模板部分 <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" style="width:1200px;margin: 0 auto">  <el-form-item label="活动性质" prop="type">    <el-checkbox-group v-model="ruleForm.type">      <el-checkbox label="美食/餐厅线上活动" name="type" />      <el-checkbox label="地推活动" name="type" />      <el-checkbox label="线下主题活动" name="type" />      <el-checkbox label="单纯品牌曝光" name="type" />    </el-checkbox-group>  </el-form-item>  <el-form-item label="特殊资源" prop="resource">    <el-radio-group v-model="ruleForm.resource">      <el-radio label="线上品牌商赞助" />      <el-radio label="线下场地免费" />    </el-radio-group>  </el-form-item>  <el-form-item label="活动名称" prop="name">    <el-input v-model="ruleForm.name" />  </el-form-item>  <el-form-item>    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>    <el-button @click="resetForm('ruleForm')">重置</el-button>  </el-form-item></el-form>// 数据部分ruleForm: {  name: '',  type: [],  resource: ''},rules: {  name: [    { required: true, message: '请输入活动名称', trigger: 'blur' },    { validator: limit, trigger: 'blur' }  ],  type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],  resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }]}

页面展示是这样

但如果name不是ruleForm的一级属性，而是二级属性

<el-form-item label="活动名称" prop="name">  <el-input v-model="ruleForm.user.name" /></el-form-item>

那么，之前的校验就会失效

其实，解决方法也很简单

// 模板部分<el-form-item label="活动名称" prop="user.name">  <el-input v-model="ruleForm.user.name" /></el-form-item>// 数据部分rules: {  user: {    name: [      { required: true, message: '请输入活动名称', trigger: 'blur' },      { validator: limit, trigger: 'blur' }    ]  },  type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],  resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }]}

也就是给el-form-item的prop属性和校验对象rules也嵌套下。

虽然解法比较简单，但当初也是浪费了不少时间在这上面，文档描述这个样子，恕我理解不能

最后，补充下，Vue中watch属性观察嵌套的值竟然是这样的

watch: {  'ruleForm.user.name'(nv, ov) {    console.log(nv)  }},

哈哈，少见多怪了我