vue el-form 表单对象里还有对象，多层嵌套校验，制定校验规则

<template>
  <div>
    <el-form ref="dataFrom" :model="dataFrom" :rules="rules">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="dataFrom.userName"></el-input>
      </el-form-item>
      <el-form-item label="角色名" prop="role.roleName">
        <el-input v-model="dataFrom.role.roleName"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="submitData()">&nbsp;&nbsp;提交</el-button>
  </div>
</template>
 
<script>
  export default {
    name: "settlementSignReport",
    data() {
      return {
        dataFrom: {
          userName: '',
          role: {
            roleName: ''
          }
        },
        rules: {
          userName: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          'role.roleName': [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ]
        }
      }
    },
    methods: {
    }
  }
</script>

1、重点是： 给 el-form-item 的 prop=“” 设为：prop=“role.roleName”

2、然后在校验规则中：重点要用’ '括起来

rules: {
  'role.roleName': [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ]
}