ElementPlus的表单的一般结构是: <el-form> <el-form-item> <el-input/> </el-form-item> </el-form> ElementPlus中使用表单校验规则: 在<script>中给出校验规则对象,主要属性名要与form对象的属性名一致 一个字段的校验规则可以有多个,值是一个数组,数组中的一个对象就是一条校验规则 // 收集表单数据 ...
this .ruleForm.formItemArr.push(itemObj); }, 1. 2. 3. 4. 5. 6. 7. 8. 重点来喽,因为是循环的,所以prop也要变成动态的了,要拼接上index,就变成根据索引去找对应的校验项了,即为::prop="'formItemArr.' + index + '.name'" ,这样的话,就变成了:prop="formItemArr.0.name"、prop="form...
1) 不点击复选框,点击提交,可以通过校验;( 2)点击复选框,不上传文件,校验不通过;( 3)点击复选框,上传文件,提示字样消失,且校验通过;( 4)点击复选框,显示必传的样式显示,不点击复选框,则不提示红点; 二、踩坑记录 1、在form-item中需要填写prop,还需要在data中填写rules,并且prop的值与rules对应的规则...
安装图标库: pnpm i @element-plus/icons-vue 结构相关 1. 结构相关 el-row表示一行,一行分成24份 el-col表示列 (1) :span="12" 代表在一行中,占12份 (50%) (2) :span="6" 表示在一行中,占6份 (25%) (3) :offset="3" 代表在一行中,左侧margin份数 el-form 整个表单组件 el-form-item 表...
用户在表单组件输入用户名和密码时,需要对用户输入的内容进行校验,譬如设置必填项(没有输入内容会出现提示信息),如果纯手工写,实现起来会麻烦一些,因此我们这里还是使用 element-plus 的表单组件。 element-plus 表单组件结构如下: 最外面是一个el-form标签,里面包裹两个el-form-item标签,最里面的输入框对应el-input...
首先,使用 Element Plus 提供的组件创建一个基本的表单结构: 代码语言:vue 复制 <template> <el-form :model="form" ref="formRef" :rules="rules" label-width="120px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> ...
首先,要了解el-form表单上的两个属性,model, rules,; element-plus 文档中关于上面二个属性的介绍如下: model表单数据对象, 注意此属性与el-form-item中的prop属性结合使用。需要了解的是el-input绑定的model属性要与el-form中绑定的model值,加上el-form-item中的prop属性的值相同。
<el-form-item prop="recommend"label="是否推荐"> <el-selectv-model="ruleForm.recommend"placeholder="请选择是否推荐"> <el-option label="是":value="1"></el-option> <el-option label="否":value="0"></el-option> </el-select>
1、el-from 2、el-from-item 3、表单数据 4、rule的设置 4、验证结果(提交or确认按钮) 一、前言 1、首先看看官网是怎么说的: Form 组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将 Form-Item 的prop属性设置为需校验的字段名即可。