表单基本用法
el-form 容器，通过 model 绑定数据
el-form-item 容器，通过 label 绑定标签
表单组件通过 v-model 绑定 model 中的数据
<template>
<div id="app">
<el-form inline :model="data">
<el-form-item label="审批人">
<el-input v-model="data.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="data.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
data: {
user: 'sam',
region: '区域二'
}
}
},
methods: {
onSubmit() {
console.log(this.data)
}
}
}
</script>
表单校验基本用法
Form 组件提供了表单验证的功能，只要通过 rules 属性传入约定的验证规则，并将 Form-item 的 prop 属性设置为需要校验的字段名即可。
1、定义校验规则，可以绑定到 el-form 或 el-form-item
data() {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
callback()
} else {
callback(new Error('用户名长度必须大于3'))
}
}
return {
data: {
user: 'sam',
region: '区域二'
},
rules: {
user: [
{
required: true, trigger: 'change', message: '用户名必须录入' },
{
validator: userValidator, trigger: 'change' }
]
}
}
}
2、指定 el-form-item 的 prop 属性
<el-form-item label="审批人" prop="user">
<el-input v-model="data.user" placeholder="审批人" clearable></el-input>
</el-form-item>
表单校验相关属性
hide-required-asterisk 隐藏必录标识
inline-message 验证消息是否在一行显示
表单校验高级用法
用法一：动态改变校验规则
1、rules 只包含一个校验规则
{
rules: {
user: [
{
required: true, trigger: 'change', message: '用户名必须录入' },
]
}
}
2、动态添加 rules
addRule() {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
this.inputError = ''
this.inputValidateStatus = ''
callback()
} else {
callback(new Error('用户名长度必须大于3'))
}
}
const newRule = [
...this.rules.user,
{
validator: userValidator, trigger: 'change' }
]
this.rules = Object.assign({
}, this.rules, {
user: newRule })
}
用法二：手动控制校验状态
TIP
validate-status：验证状态，枚举值，共四种：
——success：验证成功
——error：验证失败
——validating：验证中
——（空）：未验证
error：自定义错误提示
1、设置 el-form-item 属性
<el-form-item
label="用户名"
prop="user"
:error="error"
:validate-status="status"
>
<!-- ... -->
</el-form-item>
2、自定义 status 和 error
showError() {
this.status = 'error'
this.error = '用户名输入有误'
},
showSuccess() {
this.status = 'success'
this.error = ''
},
showValidating() {
this.status = 'validating'
this.error = ''
}
表单属性解析
label-position：标签位置，枚举值，left 和 top
label-width：标签宽度
label-suffix：标签后缀
inline：行内表单
disabled：设置整个 form 中的表单组件全部 disabled，优先级低于表单组件自身的disabled
size：设置表单组件尺寸