效果图:
代码:
<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 属性。
详细可参考官网:
关于下拉选择器框的验证没有红框框这就很困惑,有知道的小伙伴可以在下留言哦!