位置: IT常识 - 正文
element plus 的表单form使用详解(element ui el-table)
编辑：rootadmin推荐整理分享element plus 的表单form使用详解(element ui el-table)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:element-ui表格,elementplus的表单组件,提交按钮无法居中,element watch,element表格表单,elementplus的表单组件,提交按钮无法居中,elementplus的表单组件,提交按钮无法居中,element watch,elementplus的表单组件,提交按钮无法居中,内容如对您有帮助，希望把文章链接给更多的朋友！
首先在你需要使用form组件的Vue文件里引入
import type { FormInstance } from 'element-plus'拿这一张图解释一下属性，第一项ref="ruleFormRef",，ruleFormRef就是我们定义并使用各个属性的必要条件，const ruleFormRef = ref<FormInstance>() 在引入FormInstance之后，也就是说FormInstance就是一个接口，用来规定每一项属性，第二个:model="ruleForm"就是我们定义验证规则对象的集合，:rules="rules"就是验证规则的实现，包含是否必填required，触发事件，包括change和blur ，label-width="120px" 就是一个label的宽度，el-form下的label标签会自动继承el-form的宽度，也就是相当于我们自定义了一个label标签并把他的宽度设置为了120px，class就是我们自定义的类名，可以自定义样式，size属性就是输入框的大小，包含default large small 三个属性，status-icon就是验证是否输入正确时，输入框尾部会有相应的icon图标提示，默认是false，
label-position 标签对齐的方式，有left right top三个属性。
下面是的el-form-item属性，上面我们说到ruleForm是验证规则的集合，那么如何去验证用户输入的是否符合规则呢？需要设置两个属性，第一个是在el-form-item标签上设置prop属性，比如说我这里的ruleForm对象里有一个name验证规则，
第二步就是el-input标签上设置 v-model='ruleForm.name'
类似于这样
现在已经知道规则用的位置了。下面是自定义规则，
首先是定义ruleForm，他是一个reactive对象，是所有规则的对象集合
具体的规则是这样的
首先是validate 是对整个表单的内容进行验证，后面就是具体的规则实现，trigger是触发的事件，上面已经讲过了。
他接收三个参数，rule就是下面的规则，value就是输入的内容，callback就是一个回调函数，
我们可以自己写正则表达式来验证输入的内容。
注意：callback(),这个回调参数一定要放在最后写上，不写的话，他就会一直验证中，即使你输入的内容是符合规则的。
上一篇：路由器晚上要关吗？无线路由器怕打雷打闪吗(路由器晚上关了,早上再开信号会好吗?)
下一篇：用Windows7控制策略彻底困死木马病毒的方法(windows7中可以设置控制计算机)
