Basic usage of form
el-form container, bind data through model
el-form-item container, bind label through label
Form components bind data in model through v-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>
Basic usage of form validation
The Form component provides the function of form validation, as long as you pass in the agreed validation rules through the rules property, and set the prop property of the Form-item to the field name that needs to be verified.
1. Define verification rules, which can be bound to el-form or 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. Specify the prop attribute of el-form-item
<el-form-item label="审批人" prop="user">
<el-input v-model="data.user" placeholder="审批人" clearable></el-input>
</el-form-item>
Form validation related attributes
hide-required-asterisk hide the required logo
inline-message to verify whether the message is displayed on one line
Advanced usage of form validation
Usage 1: Dynamically change the verification rules
1. The rules contain only one verification rule
{
rules: {
user: [
{
required: true, trigger: 'change', message: '用户名必须录入' },
]
}
}
2. Dynamically add 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 })
}
Usage 2: Manually control the verification status
TIP
validate-status: validation status, enumeration value, four types:
——success: successful validation
——error: validation failed——
validating: validating
——(empty): not validated
error: custom error prompt
1. Set the el-form-item attribute
<el-form-item
label="用户名"
prop="user"
:error="error"
:validate-status="status"
>
<!-- ... -->
</el-form-item>
2. Custom status and error
showError() {
this.status = 'error'
this.error = '用户名输入有误'
},
showSuccess() {
this.status = 'success'
this.error = ''
},
showValidating() {
this.status = 'validating'
this.error = ''
}
Form attribute resolution
label-position: label position, enumeration value, left and top
label-width: label width
label-suffix: label suffix
inline: inline form
disabled: set all form components in the entire form to be disabled, the priority is lower than that of the form component itself disabled
size: set the size of the form component