美文网首页
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