您的位置 首页 > 数码极客

如何在弹窗里添加表单

效果图:


代码:

 <el-button type="primary" plain @click="dialogFormVisible = true">             授权管理           </el-button><el-dialog title="授权管理" :visible.sync="dialogFormVisible">       <el-form :model="form" :rules="rules" ref="ruleForm">         <el-form-item label="授权用户名" :label-width="formLabelWidth" prop="value">           <el-select v-model="; placeholder="请选择">           <el-option             v-for="item in ;             :key="i;             :label="i;             :value="i;           >           </el-option>         </el-select>         </el-form-item>         <el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">           <el-input v-model="; autocomplete="off"></el-input>         </el-form-item>         <el-form-item label="授权公钥" :label-width="formLabelWidth" prop="gpassword">           <el-input v-model="; autocomplete="off"></el-input>         </el-form-item>         <el-form-item label="授权私钥" :label-width="formLabelWidth" prop="spassword">           <el-input v-model="; autocomplete="off"></el-input>         </el-form-item>         <el-form-item label="备注" :label-width="formLabelWidth">           <el-input type="textarea" v-model=";></el-input>         </el-form-item>         <el-form-item label="状态" :label-width="formLabelWidth" prop="region">           <el-select             v-model=";             autocomplete="off"             placeholder="请选择状态"           >             <el-option label="启用" value="qiyong"></el-option>             <el-option label="禁用" value="jingyong"></el-option>           </el-select>         </el-form-item>       </el-form>       <div slot="footer" class="dialog-footer">         <el-button @click="resetForm('ruleForm')">取 消</el-button>         <el-button type="primary" @click="dialogFormVisible = false"           >确 定</el-button         >       </div>     </el-dialog>

关键点::visible.sync="dialogFormVisible" 用于显隐弹窗。变量dialogFormVisible=false时隐藏,为true时显示。

可参考官网:

表单中的非空验证关键点:

通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可

在<el-form>标签里加入:rules="rules" ,然后在<el-form-item>标签加入prop 属性。

详细可参考官网:

关于下拉选择器框的验证没有红框框这就很困惑,有知道的小伙伴可以在下留言哦!

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“如何在弹窗里添加表单”边界阅读