element from动态添加数据 并验证

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量554 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44286765/article/details/126307816
版权 
<template>
  <div class='Addcmd'>
    <div class="addbox">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" class="demo-ruleForm boxtable">
        <el-form-item label="指挥机构名称：" prop="name" label-width="120px">
            <el-input class="mechanism" v-model="ruleForm.name" placeholder="请输入机构名称"></el-input>
        </el-form-item>

        <!-- 总指挥 -->
        <div class="commandbox">
            <div class="command_title">
               <p class="addname"> 
                <span class="addtitle_ic"></span>
                <span class="command_name addtitle">总指挥</span>
               </p>
               <span class="addbtn" @click="addcommand('commandList')">添加</span>
            </div>

        <el-form ref="commandList" :model="ruleForm">
            <el-table
                :data="ruleForm.commandList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope"> 
                       <el-form-item
                            :prop="'commandList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                     <el-form-item
                            :prop="'commandList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                    <el-form-item
                            :prop="'commandList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'commandList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    row-class-name='dels'
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="operate-groups">
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope,'commandList')">删除</span>
                        </div>
                    </template> 
                </el-table-column> 
            </el-table> 
        </el-form>
        </div>



            <!-- 副指挥 -->
            <div class="commandbox">
                <div class="command_title">
                    <p class="addname"> 
                        <span class="addtitle_ic"></span>
                        <span class="command_name addtitle">副总指挥</span>
                    </p>
                    <span class="addbtn" @click="addcommand('vicecommandList')">添加</span>
                </div>
            <el-form ref="vicecommandList" :model="ruleForm">
            <el-table
                :data="ruleForm.vicecommandList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'vicecommandList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' }]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'vicecommandList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'vicecommandList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                     <el-form-item
                            :prop="'vicecommandList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                             <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'vicecommandList')">删除</span>
                        </div>
                </template> 
                </el-table-column> 
            </el-table> 
        </el-form>
        </div>



         <!-- 协调办公室 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle">协调办公室</span>
                </p>
                <span class="addbtn" @click="addcommand('coorofficeList')">添加</span>
                </div>

        <el-form ref="coorofficeList" :model="ruleForm">
            <el-table
                :data="ruleForm.coorofficeList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                         <el-form-item
                            :prop="'coorofficeList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' }]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                     </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'coorofficeList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                          <el-form-item
                            :prop="'coorofficeList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'coorofficeList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <!-- <span class="handleEdit" @click="handleEdit(scope.$index,scope.row,'coorofficeList')">编辑</span>
                            <span class="handleSave" @click="handleSave(scope.$index,scope.row,'coorofficeList')">保存</span>
                            <span class="handleCancel" @click="handleCancel(scope.$index,scope.row,'coorofficeList')">取消</span> -->
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'coorofficeList')">删除</span>
                        </div>
            </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div>


<!-- 专项工作组 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle">专项工作组</span>
                </p>
                <span class="addbtn" @click="addcommand('specialgrpList')">添加</span>
                </div>
        <el-form ref="specialgrpList" :model="ruleForm">

            <el-table
                :data="ruleForm.specialgrpList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                         <el-form-item
                            :prop="'specialgrpList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                          <el-form-item
                            :prop="'specialgrpList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope"> 
                       <el-form-item
                            :prop="'specialgrpList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                      <el-form-item
                            :prop="'specialgrpList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <!-- <span class="handleEdit" @click="handleEdit(scope.$index,scope.row,'specialgrpList')">编辑</span>
                            <span class="handleSave" @click="handleSave(scope.$index,scope.row,'specialgrpList')">保存</span>
                            <span class="handleCancel" @click="handleCancel(scope.$index,scope.row,'specialgrpList')">取消</span> -->
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'specialgrpList')">删除</span>
                        </div>
            </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div>


<!-- 应急处置组 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle">应急处置组</span>
                </p>
                <span class="addbtn" @click="addcommand('emerteamList')">添加</span>
                </div>
        <el-form ref="emerteamList" :model="ruleForm">

            <el-table
                :data="ruleForm.emerteamList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                      <el-form-item
                            :prop="'emerteamList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'emerteamList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                         <el-form-item
                            :prop="'emerteamList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'emerteamList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <!-- <span class="handleEdit" @click="handleEdit(scope.$index,scope.row,'emerteamList')">编辑</span>
                            <span class="handleSave" @click="handleSave(scope.$index,scope.row,'emerteamList')">保存</span>
                            <span class="handleCancel" @click="handleCancel(scope.$index,scope.row,'emerteamList')">取消</span> -->
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'emerteamList')">删除</span>
                        </div>
            </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div>


<!-- 应急监测组 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle">应急监测组</span>
                </p>
                <span class="addbtn" @click="addcommand('groupList')">添加</span>
                </div>
        <el-form ref="groupList" :model="ruleForm">

            <el-table
                :data="ruleForm.groupList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                       <el-form-item
                            :prop="'groupList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                          <el-form-item
                            :prop="'groupList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                           <el-form-item
                            :prop="'groupList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                       <el-form-item
                            :prop="'groupList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <!-- <span class="handleEdit" @click="handleEdit(scope.$index,scope.row,'groupList')">编辑</span>
                            <span class="handleSave" @click="handleSave(scope.$index,scope.row,'groupList')">保存</span>
                            <span class="handleCancel" @click="handleCancel(scope.$index,scope.row,'groupList')">取消</span> -->
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'groupList')">删除</span>
                        </div>
            </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div>


        
<!-- 应急供水保障组 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle">应急供水保障组</span>
                </p>
                <span class="addbtn" @click="addcommand('supgroupListwater')">添加</span>
                </div>
        <el-form ref="supgroupListwater" :model="ruleForm">

            <el-table
                :data="ruleForm.supgroupListwater"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                     <el-form-item
                            :prop="'supgroupListwater.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'supgroupListwater.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                    <el-form-item
                            :prop="'supgroupListwater.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                             <el-form-item
                            :prop="'supgroupListwater.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <!-- <span class="handleEdit" @click="handleEdit(scope.$index,scope.row,'groupList')">编辑</span>
                            <span class="handleSave" @click="handleSave(scope.$index,scope.row,'groupList')">保存</span>
                            <span class="handleCancel" @click="handleCancel(scope.$index,scope.row,'groupList')">取消</span> -->
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'supgroupListwater')">删除</span>
                        </div>
            </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div>
        
<!-- 应急物资保障组 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle">应急物资保障组</span>
                </p>
                <span class="addbtn" @click="addcommand('supgroupList')">添加</span>
                </div>
        <el-form ref="supgroupList" :model="ruleForm">

            <el-table
                :data="ruleForm.supgroupList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                 <el-form-item
                            :prop="'supgroupList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                              <el-form-item
                            :prop="'supgroupList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'supgroupList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                     <el-form-item
                            :prop="'supgroupList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <!-- <span class="handleEdit" @click="handleEdit(scope.$index,scope.row,'supgroupList')">编辑</span>
                            <span class="handleSave" @click="handleSave(scope.$index,scope.row,'supgroupList')">保存</span>
                            <span class="handleCancel" @click="handleCancel(scope.$index,scope.row,'supgroupList')">取消</span> -->
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'supgroupList')">删除</span>
                        </div>
            </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div>


        
<!--  应急专家组 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle"> 应急专家组</span>
                </p>
                <span class="addbtn" @click="addcommand('expertgroupList')">添加</span>
                </div>
        <el-form ref="expertgroupList" :model="ruleForm">
            <el-table
                :data="ruleForm.expertgroupList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'expertgroupList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                              <el-form-item
                            :prop="'expertgroupList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                   <el-form-item
                            :prop="'expertgroupList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                     <el-form-item
                            :prop="'expertgroupList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <!-- <span class="handleEdit" @click="handleEdit(scope.$index,scope.row,'expertgroupList')">编辑</span>
                            <span class="handleSave" @click="handleSave(scope.$index,scope.row,'expertgroupList')">保存</span>
                            <span class="handleCancel" @click="handleCancel(scope.$index,scope.row,'expertgroupList')">取消</span> -->
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'expertgroupList')">删除</span>
                        </div>
            </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div>

        
<!--  综合组 -->
            <div class="commandbox">
                <div class="command_title">
                <p class="addname"> 
                    <span class="addtitle_ic"></span>
                    <span class="command_name addtitle"> 综合组</span>
                </p>
                <span class="addbtn" @click="addcommand('siveGroupList')">添加</span>
                </div>
            <el-form ref="siveGroupList" :model="ruleForm">

            <el-table
                :data="ruleForm.siveGroupList"
                style="width: 100%"> 
                <el-table-column
                    prop="unit"
                    align="center"
                    label="单位">
                    <template slot-scope="scope">
                       <el-form-item
                            :prop="'siveGroupList.'+scope.$index+'.unit'"
                            :rules="[{ required: true, message: '请填写单位' ,trigger:'blur'}]"> 
                            <el-input size="mini" v-model="scope.row.unit" placeholder="请填写单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="duty"
                    align="center"
                    label="职位">
                    <template slot-scope="scope">
                       <el-form-item
                            :prop="'siveGroupList.'+scope.$index+'.duty'"
                            :rules="[{ required: true, message: '请选择职位' , trigger: 'change'}]"> 
                            <el-select size="mini" v-model="scope.row.duty" placeholder="请选择职位">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id.toString()"
                                    :label="item.dictValue"
                                    :value="item.id.toString()">
                                </el-option>
                            </el-select>
                          </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名">
                    <template slot-scope="scope">
                       <el-form-item
                            :prop="'siveGroupList.'+scope.$index+'.name'"
                            :rules="[{ required: true, message: '请填写姓名' }]"> 
                        <el-input  size="mini" v-model="scope.row.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="phone"
                    align="center"
                    label="电话">
                    <template slot-scope="scope">
                       <el-form-item
                            :prop="'siveGroupList.'+scope.$index+'.phone'"
                            :rules="[ 
                                { required: true, message: '请输入手机号', trigger: 'blur' },
                                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
                            ]"> 
                            <el-input maxlength="11" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                        <div class="operate-groups">
                            <span class="handleDelete" @click="handleDelete(scope.$index,scope.row,'siveGroupList')">删除</span>
                        </div>
                </template> 
                </el-table-column> 
            </el-table> 
        </el-form>

        </div> 

    </el-form>
 
        <div class="btns">
                <Button 
                size='small'
                @cancelresetFormmech="cancelresetFormmech('ruleForm')"
                submitClk="cancelresetFormmech"
                name="取消"
                class="sub"
                /> 
                <Button
                type="primary"
                size='small'
                @submitFormmech="submitFormmech('ruleForm')"
                submitClk="submitFormmech"
                name="保存"
                />
        </div> 

    </div>
  </div>
</template>

<script>
import Button from "@/components/ButtomSmall/button.vue";
import {post,get} from '@/api/table.js'
import {uuid} from 'vue-uuid'
export default {
  components: {
    Button
  },
  props:['addcmdType','upDateMsg'],
  data() {
    return {
       
        rules: {
            name: [
                { required: true, message: '请输入机构名称', trigger: 'blur' }, 
            ], 
            phone10: [
                { required: true, message: "请输入手机号", trigger: "blur" },
                { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
            ],

        },
  
        options: [],
        ruleForm:{ 
            name:'',
            appId:null,
    
        //1 总指挥
        commandList:[], 
        
        //2 副总指挥
        vicecommandList:[],

        //3 协调办公室
        coorofficeList:[],

        //4 专项工作组
        specialgrpList:[],

        //5 应急处置组
        emerteamList:[],

        //6 应急监测组
        groupList:[],

        //7 应急供水保障组
        supgroupListwater:[],

        //8 应急物资保障组
        supgroupList:[],

        // 9应急专家组
        expertgroupList:[],

        // 10综合组
        siveGroupList:[],
  },
    resultArr:[],//接受表单的验证
    formArr:[
        'commandList','vicecommandList','coorofficeList',
        'specialgrpList','emerteamList','groupList',
        'supgroupListwater','supgroupList','expertgroupList',
        'siveGroupList'
    ],
        // 0指挥机构名称
        // ruleFormFlag:false,
        
        // //1 总指挥
        // commandListFlag:false, 
        // //2 副总指挥
        // vicecommandListFlag:false,
        // //3 协调办公室
        // coorofficeListFlag:false,
        // //4 专项工作组
        // specialgrpListFlag:false,
        // //5 应急处置组
        // emerteamListFlag:false,
        // //6 应急监测组
        // groupListFlag:false,
        // //7 应急供水保障组
        // supgroupListwaterFlag:false,
        // //8 应急物资保障组
        // supgroupListFlag:false,
        // // 9应急专家组
        // expertgroupListFlag:false,
        // // 10综合组
        // siveGroupListFlag:false,

        addandupdata:{}
          
        };
  },
  computed: {
      userType() {
        return this.$store.state.user.commanding
      }
    },
    watch: {
      userType: {
        immediate: true,
        handler(newVal) {
          this.options = [...newVal];
        }
      } 
    },


  methods: {
            // 添加
        addcommand(addtype){
            // 总指挥 
            if(addtype=='commandList'){
                this.ruleForm.commandList = this.ruleForm.commandList || [];
                let newObject = {
                    unit:'',
                    duty:'',
                    name:'',
                    phone:'',
                    editing:true
                };
                this.ruleForm.commandList.push(newObject) 
            }else if(addtype =='vicecommandList'){
                //副总指挥
                    this.ruleForm.vicecommandList = this.ruleForm.vicecommandList || [];
                    let newObject = {
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.vicecommandList.push(newObject) 
            }else if(addtype =='coorofficeList'){
                //协调办公室
                this.ruleForm.coorofficeList = this.coorofficeList || [];
                    let newObject = { 
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.coorofficeList.push(newObject) 
            } else if(addtype =='specialgrpList'){
                //专项工作组
                this.ruleForm.specialgrpList = this.ruleForm.specialgrpList || [];
                    let newObject = { 
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.specialgrpList.push(newObject) 
            }else if(addtype =='emerteamList'){
                //应急处置组
                this.ruleForm.emerteamList = this.ruleForm.emerteamList || [];
                    let newObject = { 
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.emerteamList.push(newObject) 
            }else if(addtype =='groupList'){ 
                //应急监测组
                this.ruleForm.groupList = this.ruleForm.groupList || [];
                    let newObject = { 
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.groupList.push(newObject) 
            }else if(addtype =='supgroupListwater'){
                this.ruleForm.supgroupListwater = this.ruleForm.supgroupListwater || [];
                    let newObject = { 
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.supgroupListwater.push(newObject) 
            }else if(addtype =='supgroupList'){ 
                //应急物资保障组
                this.ruleForm.supgroupList = this.ruleForm.supgroupList || [];
                    let newObject = { 
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.supgroupList.push(newObject) 
            }
            else if(addtype =='expertgroupList'){ 
                //应急专家组
                this.ruleForm.expertgroupList = this.ruleForm.expertgroupList || [];
                    let newObject = { 
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.expertgroupList.push(newObject) 
            }else if(addtype =='siveGroupList'){ 
                //综合组
                this.ruleForm.siveGroupList = this.ruleForm.siveGroupList || [];
                    let newObject = {
                        unit:'',
                        duty:'',
                        name:'',
                        phone:'',
                        editing:true
                    };
                this.ruleForm.siveGroupList.push(newObject) 
            }
        }, 
        handleDelete($index,row,field){ 
            this.ruleForm[field].splice($index,1);
        },

        // 判断是否通过验证
        checkForm(formName){
            
            this.resultArr = []
            let result = new Promise((resolve, reject)=> {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    resolve();
                } else { reject() }
                })
            }) 
            this.resultArr.push(result) //push 得到promise的结果
        }, 
        // 提交
        async submitFormmech(formName){ 
            this.resultArr = []
            this.$refs[formName].validate((valid) => {
              if (valid) { 
                this.formArr.forEach(item => { //根据表单的ref校验
                 if(this.ruleForm[item].length>0){
                        this.checkForm(item)
                    }
                }) 
                Promise.all(this.resultArr).then(res=> { //都通过了
                // 编辑
                if(this.addcmdType == 2){
                    let orgId = this.ruleForm.orgId
                    let name = this.ruleForm.name
                    this.addandupdata = {
                        orgId,
                        name,
                        commandList:this.ruleForm.commandList,
                        vicecommandList:this.ruleForm.vicecommandList,
                        coorofficeList:this.ruleForm.coorofficeList,
                        specialgrpList:this.ruleForm.specialgrpList,
                        emerteamList:this.ruleForm.emerteamList,
                        groupList:this.ruleForm.groupList,
                        supgroupListwater:this.ruleForm.supgroupListwater,
                        supgroupList:this.ruleForm.supgroupList,
                        expertgroupList:this.ruleForm.expertgroupList,
                        siveGroupList:this.ruleForm.siveGroupList,
                    }
                    this.addcommanding();
                }else{
                // 新增
                    let name = this.ruleForm.name
                    this.addandupdata = {
                        name,
                        commandList:this.ruleForm.commandList,
                        vicecommandList:this.ruleForm.vicecommandList,
                        coorofficeList:this.ruleForm.coorofficeList,
                        specialgrpList:this.specialgrpList,
                        emerteamList:this.ruleForm.emerteamList,
                        groupList:this.ruleForm.groupList,
                        supgroupListwater:this.ruleForm.supgroupListwater,
                        supgroupList:this.ruleForm.supgroupList,
                        expertgroupList:this.ruleForm.expertgroupList,
                        siveGroupList:this.ruleForm.siveGroupList,
                    }
                    this.upcommanding()
                }

                // 该区域使用this无效，promise内面的this表示局部，并不代表VueComponet实例
                }).catch(function() {
                    console.log("err");
                }); 


 
              }})
 
            
 
        },

        //添加
       async addcommanding(){
            let {data,code,msg} = await post('CommandingOrg/updateCommandingOrgAndDetailed',this.addandupdata)
            this.resetFormmech('ruleForm');
        },
        //修改
       async upcommanding(){
            let {data,code,msg} = await post('CommandingOrg/saveCommandingOrgAndDetailed',this.addandupdata)
            this.resetFormmech('ruleForm');
        },



        // 保存后关闭弹框
        resetFormmech(formName){
            this.$refs[formName].resetFields();
            this.$emit('closeCmd')
        },
        // 取消后关闭弹框
        cancelresetFormmech(){
            this.$emit('cancelFormmech')
        },

        //请求详情
        async getdetlate(){
            let id = {
                id:this.ruleForm.orgId
            }
            let { data } = await get('CommandingOrg/getCommandingOrgDetailed',id);
            this.ruleForm.commandList = data.commandList; 
            this.ruleForm.vicecommandList = data.vicecommandList;
            this.ruleForm.coorofficeList = data.coorofficeList;
            this.ruleForm.specialgrpList = data.specialgrpList;
            this.ruleForm.emerteamList = data.emerteamList;
            this.ruleForm.groupList = data.groupList;
            this.ruleForm.supgroupListwater = data.supgroupListwater;
            this.ruleForm.supgroupList = data.supgroupList;
            this.ruleForm.expertgroupList = data.expertgroupList;
            this.ruleForm.siveGroupList = data.siveGroupList;
        },
      
  },
  
  created() {

  },
  mounted() { 
    this.ruleForm.orgId = this.upDateMsg.id;
    this.ruleForm.name = this.upDateMsg.name;

   if(this.addcmdType == 1){ 
        this.ruleForm.orgId = null;
        this.ruleForm.name = null;
        this.commandList = [];
        this.vicecommandList = [];
        this.coorofficeList = [];
        this.specialgrpList = [];
        this.emerteamList = [];
        this.groupList = [];
        this.supgroupList = [];
        this.expertgroupList = [];
        this.siveGroupList = [];
        this.supgroupListwater = [];
    }else{
        this.getdetlate();
    }
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
.mechanism{
    width: 200px;
}
.addtitle,.addbtn{
    cursor: pointer;
    color: #409eff;
}
.addtitle_ic{
    display: inline-block;
    width: 5px;
    height: 15px;
    background: #409eff;
}
.addtitle{
    font-weight: bold;
    margin-left: 10px;
}
.command_title,.addname{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.operate-groups{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.operate-groups .handleEdit{
   cursor: pointer;
   color: #409eff;
}


.operate-groups .handleEdit{
   cursor: pointer;
   color: #409eff;
}

.operate-groups .handleSave{
   cursor: pointer;
   color: #409eff;
}

.operate-groups .handleCancel{
    cursor: pointer;
    color: #409eff; 
}
.operate-groups .handleDelete{
    cursor: pointer;
    color: #ff0012; 
}

.commandbox{
    margin-top: 20px;
}
.boxtable{
    padding-right: 20px;
    height: 500px;
    overflow-y:scroll;
}

::v-deep .btns{
    margin-top: 20px;
    display: flex;
    justify-content:flex-end;
}
.sub{
    margin-right: 20px;
}

 
::v-deep .el-table td{
    padding: 0;
 }


</style>
我有一粒花生米
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+Element实现动态生成新表单并添加验证功能
10-16
主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
问题（01） form表单，动态添加校验
dugujiuding的博客
05-18 1212
elementUI表单，动态添加校验
vue el-form-item :rules动态校验实现
qq_43805205的博客
07-19 2082
【代码】vue el-form-item :rules动态校验实现。
【element-ui】form表单动态修改rules校验项
小墨鱼的前端问题录
09-21 1978
增加rules校验项。删除rules校验项。
vue中用element-ui给动态添加的表单增加校验规则
子非鱼焉非我所愿的博客
04-20 1659
注意：v-for遍历生成的表单的ref拿到的是一个数组，this.$refs.personnelInformationForm[i]拿到的就是具体的各个表单的ref的对应结构了，准备个变量flag来控制通过校验与否，且要注意在这个函数最上面要把这个变量赋值回初始值，否则当前检验规则不通过下次再保存永远不通过！
Vue Element动态生成的表单如何用 el-form 校验
大灰狼的小绵羊哥哥的博客
12-11 1841
Vue Element动态生成的表单如何用 el-form 校验
VUE element-ui之el-form复杂表单的校验，可动态添加删除
qq_37485170的博客
11-02 3599
项目场景：一些大型的项目中，不仅仅是简单的form表单校验，可能会有一些复杂的表单校验，入如下图所示，带新增删除功能，同时删除新增的表单也需要做校验： 关键点：data中数据如下： form表单格式如下： methods部分如下:
动态添加form表单并进行验证
bbkhhvv的博客
06-30 706
【代码】动态添加form表单并进行验证。
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 5821
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
elementUI动态嵌套el-form表单校验
小绵杨
03-19 6863
前端项目开发过程中表单校验是非常常见的需求，elementUI的el-form组件也是支持配置rules属性来配置表单项的校验。 Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。 Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。
vue element动态渲染、移除表单并添加验证的实现
12-07
又接到新需求了吧~~ 背景 在一个大表单里，有可能... 动态新增的表单如何验证 动态表单怎么填写对应的 prop … 好吧，我当时也思考了一会，最后选择数组方式，动态渲染 代码实现讲解 利用数组，v-for 循环方式，可
Vue+Element ui 根据后台返回数据设置动态表头操作
10-14
主要介绍了Vue+Element ui 根据后台返回数据设置动态表头操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中elment-ui添加表单验证规则，以及动态增加的表单校验
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
08-31 1321
vue中elment-ui添加表单验证规则，以及动态增加的表单校验
el-form动态表单添加校验规则
Gpointy的博客
11-19 132
0 效果 1 代码 1.1 直接在rules中校验 1.2 在json中校验
ElementUI 实现动态表单数据校验（已解决）
qq_49002903的博客
07-26 1万+
日常问题记录：ElementUI 实现动态表单数据校验（已解决）
el-form表单校验 动态添加el-form-item rules用法，嵌套表单校验
热门推荐
qq_37418556的博客
04-26 1万+
el-form表单校验 动态添加el-form-item rules用法，嵌套表单校验 el-form中rules绑定的规则，只争对model绑定对象中的一级元素（如homeworkName）起作用，且定义rules规则的时候，名称要与绑定的对象的属性（prop中绑定的）名称一致 对于个别el-form-item中的元素含有多层且套的情况，可以给el-form-item中绑定属于自己的规则，需要注意给prop绑定时的名称要保持一致（一级属性+索引+二级属性名称 :prop="‘list.’+index+
el-form+el-table动态表单嵌套以及校验
打工人
11-18 1685
【代码】el-form+el-table动态表单嵌套以及校验。
element el-form 动态表单及自定义校验
weixin_42439024的博客
09-15 1773
element ui el-form动态表单及校验
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 421
注释很详细，直接上代码……
用vue3+ts写一个炫酷登陆页，并添加element的验证规则，登录分别有账号，密码，验证码
06-09
我们可以使用Element UI来添加验证规则并在登录过程中使用它。 以下是代码示例： ```html 登录 账号" prop="username"> <el-input v-model="form.username"></el-input> 密码" prop="password"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值