el-form 表单深度验证

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 >



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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容