elementui form表单,Vue+ElementUI
本文主要详细介绍了基于vue的ElementUI的构成。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
ElementUI表单简单案例表单的主要组件、表单组件的使用、内嵌表单对齐、表单验证、自定义验证规则、表单中组件的维度控制、表单模块的属性摘要、表单模块的方法、表单项目模块的属性摘要
ElementUI表单
El的表格在官网有很多内容，我看着就觉得累。但其实用起来很方便。el为我们打包了各种组件，风格流行。
一个简单的案例
代码如下（使用时确保引入了相关的组件）
模板
El-form ref= form :model= form label-width= 80px
El-form-item label=用户名！- form-item用于显示相关文件-
el输入v-model=form.name/el输入
/El-表单-项目
El-form-item标签=密码
el-input type=密码 v-model=form.pwd/el-input
/El-表单-项目
El-表单-项目
El-button type= primary @ click= on submit 登录/el-button
El按钮取消/el按钮
/El-表单-项目
/el格式
/模板
脚本
导出默认值{
data() {
返回{
表单：{
名称： ，
密码：“”
}
}
},
方法：{
onSubmit() {
console.log(submit！);
}
}
}
/脚本
看起来还是挺多行是吗?去掉一些必要的标签和一些声明，剩下的就是：El-form，El-input和El-form-item。El-form是必要的，它对布局有影响。el-form-item是相关表单元素的文本，el-input是我们的输入框。版面已经预设好了，这三个可以是最基本的形式。方便吗？
表单的主要组件
常用的表单组件，输入框、下拉框、单选框、多选框和文本字段，对应的组件有：表单、formitem、输入、选择、选项、复选框和单选。
还有一些实用的组件，如Switch、DatePicker、TimePicker、RadioGroup、CheckboxGroup等。
表单组件的使用
不管哪一种组件都一样，先在main.js中介绍一下模块，然后就可以在页面中使用了：
//main.js
从“element-ui”导入{Form，FormItem，Input，CheckboxGroup，Radio，RadioGroup，Switch }；
Vue.use(表单)
Vue.use(单选按钮组)
Vue.use(收音机)
Vue.use(FormItem)
Vue.use(输入)
//.需要介绍什么？
假设是在form.vue中使用，代码太多读不完，所以我只写了一个下拉框、开关和文本字段。(这叫抛砖引玉，西西)
模板
El-form ref= form :model= form label-width= 80px
El-form-item标签=活动区域
！-记住使用v-model绑定表单字段-
El-select v-model= form . region placeholder=请选择活动区域
El-option标签=一区值=上海/el-option
El-option标签=区域2 值=北京/el-option
/el-select
/El-表单-项目
El-form-item label=即时交付
！-记住使用v-model绑定表单字段-
el开关v-model=form.delivery/el开关
/El-表单-项目
El-form-item label=活动表单
！-记住使用v-model绑定表单字段-
el输入类型= textarea v-model= form . desc /El输入
/El-表单-项目
El-表单-项目
El-button type= primary @ click= on submit 立即创建/el-button
El按钮取消/el按钮
/El-表单-项目
/el格式
/模板
脚本
导出默认值{
data() {
返回{
表单：{
区域： ，//区域
Delivery: false，//是否及时送达？
Desc: //活动表单描述
}
}
},
方法：{
onSubmit() {
console.log(submit！);
}
}
}
/脚本
效果如下
行内的表单
不难发现，我们所有的组件都是站成一排的，很容易把组件做成行内元素。将属性：inline=true 添加到el-form组件中(在属性前添加一个冒号，以识别true值是一个布尔值，no将被视为一个字符串)
el-form :inline=true
！-//就这样-
/el格式
对齐方式
* *此处的对齐是指标签的文本对齐。* *也加载到el表单组件的标签位置属性中
标签位置的可用值：left、right、top(top是上面的标签和下面的组件的显示，它们不在一条线上)。如下
el表单标签-位置=左
！-//就这样-
/el格式
表单验证
表单验证的关键点有三：
1.将：rules= rule group object 属性添加到1.el-form组件，该值是有效性规则的对象。
2.表单组件添加属性来指定组件验证规则。属性被添加到el-form-item
3.定义验证规则的对象。
验证通常用于输入框。
如下代码：
模板
El-form ref= form :rules= rules :model= form label-width= 180 px
El-form-item label=活动名称，长度限制 prop=name
el输入v-model=form.name/el输入
/El-表单-项目
El-form-item label=url，类型限制 prop=u
el输入v-model=form.url/el输入
/El-表单-项目
/el格式
/模板
脚本
导出默认值{
data() {
返回{
表单：{
名称： ，
url: ，
},
规则：{
名称：[
{必填：真，消息：请输入活动名称，触发器：模糊 }，
{最少：3，最多：5，消息：长度为3到5个字符，触发器：模糊 }
],
u:[
{类型： url ，必需：true，消息：必须是规范的URL地址，触发器：更改 }
]
},
}
},
}
}
/脚本
重要的一点是，如果超过验证数字类型，那么。需要把v-model换成v-model.number！记住！
El-form-item label=url，类型限制 prop=u
！-添加数字修饰符，将输入值转换为数字类型-
el输入v-model.number=form.num/el输入
/El-表单-项目
自定义的验证规则
自定义验证和预定义验证的区别就在于一点(考考你，三个重点是什么):
自定义规则对象的编写形式
脚本
导出默认值{
data() {
let checkNum=(规则，值，回调)={
规则//在这里，你会得到定义的验证对象的属性。
如果(！Number.isInteger(val)){
//如果要提示错误信息，通过第三个参数回调，其值为错误实例。
回调(新错误(请输入数值))
}
}
返回{
//检查规则
规则：{
u:[
{type: url ，required: true，message:必须是规范的url地址，trigger: change}，
//添加一个带有函数名值的自定义验证。
{验证程序：checkNum，targger:更改 }
],
},
}
}
}
/脚本
表单内组件尺寸控制
向el-form添加size属性以指定表单元素的大小。非常简单，如下
可用的尺寸值：中/小/迷你
el-form size=miniz
/el格式
总结form模块的属性
属性值描述模型对象表单数据对象规则内联对象验证规则布尔默认值false设置为内联元素标签-位置右/左/上默认右表单字段标签对齐标签-宽度字符串如150px标签(标签)宽度大小中/小/迷你表单组件大小状态-图标布尔默认值false是否显示检查结果图标禁用布尔默认值false范围是整个表单。没必要解释。
form模块的方法
Form Methods（官方文档的，了解一下）
方法名描述了参数validate如何验证整个表单，参数是一个回调函数。这个回调函数将在验证后被调用，传入两个参数：验证是否成功，验证失败的字段。如果回调函数没有传入，则返回一个方法函数(props: array string，Callback: function(错误消息：string))resetFields重置整个表单，将所有字段值重置为初始值并删除验证结果—clearValidate删除表单项的验证结果。传入要移除的表单项的prop属性或props数组，如果没有，则移除整个表单的验证结果函数(props: array string)。这些方法怎么用？
模板
el-form ref=f
/el格式
/模板
脚本
//重置表单
const from=this。$refs.f.resetFields()
/脚本
form-item模块的属性
参数值描述了propstring传递到模型中的字段。在使用validate和resetFields方法的情况下，此属性是必需的labelstringtag text label-widethstring，例如150px。标签requiredboolean占用的框架，是否需要？规则对象表单检查规则大小中/小/迷你组件大小显示-消息布尔默认值真显示检查错误消息内嵌-消息布尔默认值假以内嵌形式显示检查信息
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。