フォームの基本的な使用法
el-formコンテナー、モデルを介してデータをバインドします
el-form-itemコンテナー、ラベルを介してラベルを
バインドしますフォームコンポーネントは、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>
フォーム検証の基本的な使用法
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必要なロゴを
インラインメッセージで非表示にして、メッセージが1行に表示されているかどうかを確認します
フォーム検証の高度な使用法
使用法1：検証ルールを動的に変更する
1.ルールには検証ルールが1つだけ含まれています
{
rules: {
user: [
{
required: true, trigger: 'change', message: '用户名必须录入' },
]
}
}
2.ルールを動的に追加します
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 })
}
使用法2：検証ステータスを手動で制御する
TIPの
検証ステータス：検証状態、列挙値、4種類
： --success：検証が成功し
--error：検証failed--
検証：有効
- （空）：検証されていない
エラー：カスタムエラープロンプト
1.el-form-item属性を設定します
<el-form-item
label="用户名"
prop="user"
:error="error"
:validate-status="status"
>
<!-- ... -->
</el-form-item>
2.カスタムステータスとエラー
showError() {
this.status = 'error'
this.error = '用户名输入有误'
},
showSuccess() {
this.status = 'success'
this.error = ''
},
showValidating() {
this.status = 'validating'
this.error = ''
}
フォーム属性の解決
label-position：ラベル位置、列挙値、左と上
label-width：ラベル幅
label-suffix：ラベルサフィックス
インライン：インラインフォーム
無効：フォーム全体のすべてのフォームコンポーネントを無効に設定します。優先度はの優先度よりも低くなります。フォームコンポーネント自体が無効になっている
サイズ：フォームコンポーネントのサイズを設定します