目录
元素 UI 表单
el官网内容很多，看完感觉很累。 但其实用起来还是很方便的，el为我们封装了各种组件，而且风格也比较流行。
一个简单的案例
代码如下（使用时请务必引入相关组件）
<el-form ref="form" :model="form" label-width="80px"> 登录 取消 export default { data() { return { form: { name: '', pwd:'' } } }, methods: { onSubmit() { console.log('submit!'); } } }
看起来还是有很多线条，对吧？ 去掉一些必要的标签和一些声明，剩下的就是：el-form、el-input、el-form-item 三个组件。 el-form是必要的，并且对布局有影响。 el-form-item 是与表单元素关联的文本，el-input 是我们的输入框。 布局已经预设好了，这三种就可以是最基本的形式了。 方便吗？
表格的主要组成部分
常用的表单组件有输入框、下拉框、单选框、多选框、文本字段，对应的组件有：Form、FormItem、Input、select、Option、Checkbox、Radio。
还有一些实用的组件，比如Switch、DatePicker、TimePicker、RadioGroup、CheckboxGroup等。
表单组件的使用
无论哪个组件都是一样的，先在main.js中引入该模块，然后在页面中使用：
// main.js
import {Form,FormItem,Input,CheckboxGroup,Radio, RadioGroup,Switch} from 'element-ui';
Vue.use(Form)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(FormItem)
Vue.use(Input)
// ...需要哪些引入哪些
假设用在form.vue中，代码太多读不下去，所以我只写了一个下拉框、开关、文本字段。 （这叫抛砖引玉，西西）
立即创建
取消
export default {
data() {
return {
form: {
region: '',// 区域
delivery: false,// 是否及时配送
desc: '' //活动形式描述
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
效果如下
内联表格
不难发现，我们的组件都是一一排成一排的。 将组件制作成内联元素也很简单。 只需要在el-form组件中添加属性：inline="true"即可（属性前加引号会将该值识别为布尔值true，否则会被视为字符串）
对准方法
**这里的对齐是指标签的文字对齐方式。 **也是在el-form组件的label-position属性中加载的
label-position可用值：left、right、top（top表示标签在顶部，与组件底部的显示不在同一行）。如下
表单验证有3个要点：
1、el-form组件中添加：添加rules=“规则组对象”属性，值为验证规则的对象
2. 为表单组件添加prop属性，用于指定组件的验证规则。 el-form-item 中添加 prop 属性
3.定义验证规则的对象
验证通常用于输入字段
下面的代码：
export default {
data() {
return {
form: {
name: '',
url:'',
},
rules:{
name:[
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
u:[
{ type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' }
]
},
}
},
}
}
值得一提的是elementui表单参数，如果你想验证号码类型，那么。 需要将 v-model 替换为 v-model.number！！！ 记住！ ！ ！
自定义验证规则
自定义验证和预定义验证的区别就在于一点（考考你，三个关键点是什么）：
自定义规则对象是如何编译的
export default {
data() {
let checkNum = (rules,val,callback)=>{
rules // 这里会得到定义的校验对象的属性
if(!Number.isInteger(val)){
// 如果要提示错误信息，那么通过第三个参数回调出去，参数值为Error实例
callback(new Error('请输入数值'))
}
}
return {
// 校验规则
rules:{
u:[
{ type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' },
// 添加一条自定义的验证，值为函数名
{validator:checkNum,targger:'change'}
],
},
}
}
}
形式化的组件规格控制
通过给el-form添加size属性来指定form元素的规格。很简单，如下
尺寸可用值：中号/小号/迷你号
总结一下表单模块的属性属性值描述
模型
目的
表单数据对象
规则
目的
验证规则
排队
布尔值默认 false
是否设置为内联元素
标签位置
右/左/上默认右
表单字段标签对齐方法
标签宽度
字符串，例如 150px
标签标签（标签）的长度
尺寸
中型/小型/迷你型
表单组件规范
状态图标
布尔值 默认 false
是否显示校准结果图标
残疾人
布尔值 默认 false
范围是整个表格，无需解释
表单模块的方式FormMethods（官方文档，了解一下）方法名称描述参数
证实
校准整个表单的方式，参数是回调函数。 校准后会调用bounce函数，传入两个参数：校准是否成功和校准失败的数组。 如果没有传入回调函数，则会返回一个promise
函数（回调：函数（布尔值，对象））
验证字段
如何校准部分形式数组
函数（属性：数组|字符串，回调：函数（errorMessage：字符串））
重新设置领域
重置整个表格，将所有数组值重置为初始值并删除校准结果
—
清除验证
移除表单项的校准结果。传入要移除的表单项的prop属性或props的链表，如果不传入elementui表单参数，则移除整个表单的校准结果
函数（属性：数组|字符串）
如何使用这种方式呢？
// 重置表单
const from = this.$refs.f.resetFields()
form-item模块属性参数参数值说明
道具
细绳
传入models数组。如果使用validate和resetFields方法，则需要该属性
标签
细绳
标签文本
标签宽度
细绳
例如150px。标签占用的框架大小
必需的
布尔值
是必须的吗？
规则
目的
表格校准规则
尺寸
中型/小型/迷你型
元件规格
显示消息
布尔值 默认 true
是否显示校准错误信息
内联消息
布尔值 默认 false
内嵌显示校准信息
总结
以上就是本文的全部内容了，希望能够对您有所帮助，也希望您多多关注展泉网更多内容！
