美文网首页
el-form 表单深度验证

el-form 表单深度验证

作者: 点点点_dad5 | 来源:发表于2019-08-05 17:09 被阅读0次

    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 >

        至此,表单验证,再无大坑

    相关文章

      网友评论

          本文标题:el-form 表单深度验证

          本文链接:https://www.haomeiwen.com/subject/rygmdctx.html