<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()"> 提交</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>
<style scoped>
</style>
1、重点是: 给 el-form-item 的 prop="" 设为:prop="role.roleName"
2、然后在校验规则中:重点要用 ‘’ 括起来
rules: {
'role.roleName': [
{required: true, message: '请输入用户名', trigger: 'blur'},
]
}