1.el-form 表单深度验证的问题
数据结构:
data: {
a: 0,
b: 0,
house_type: 1,
room: [
{
room_number: 1,
room_space: 1
},
{
room_number: 2,
room_space: 2
}
]
}
代码结构:
<el-form
ref="form"
:rules="验证规则"
:model="data" // 数据源
>
<el-form-item lable="title" prop="a">
<el-input v-model="data.a"></el-input>
</el-form-item>
<el-form-item lable="title" key="sss" prop="room[0].room_space" v-if="data.house_type !== 1"> // 当验证规则不起作用时 记得添加key值试试
<el-input v-model="data.room[0].room_space"></el-input>
</el-form-item>
<el-form-item label="title" v-else>
<el-table :data="data.room">
<el-table-column label="月租金">
<template slot-scope="scope">
<el-form-item :prop="'room.' + scope.$index + '.room_space'" :rules="rules里边对应的验证规则">
<el-input v-model="scope.row.room_space"></el-input> // prop 的 room. 要 和 el-table 绑定的数据data.room关键字一样
</template>
</el-table-column>
</el-table>
<el-form-item >
至此,表单验证,再无大坑
网友评论