99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

ElementPlus Form 表單

2021-09-24 21:23 更新

Form 表單

由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗(yàn)、提交數(shù)據(jù)
組件升級采用了 flex 布局，以替代舊版本的 float 布局。

典型表單

包括各種表單項，比如輸入框、選擇器、開關(guān)、單選框、多選框等。


在 Form 組件中，每一個表單域由一個 Form-Item 組件構(gòu)成，表單域中可以放置各種類型的表單控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

<template>
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區(qū)域">
    <el-select v-model="form.region" placeholder="請選擇活動區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間">
    <el-col :span="11">
      <el-date-picker
        type="date"
        placeholder="選擇日期"
        v-model="form.date1"
        style="width: 100%;"
      ></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker
        placeholder="選擇時間"
        v-model="form.date2"xx`
        style="width: 100%;"
      ></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質(zhì)">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="form.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
    },
  }
</script>

W3C 標(biāo)準(zhǔn)中有如下規(guī)定

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：當(dāng)一個 form 元素中只有一個輸入框時，在該輸入框中按下回車應(yīng)提交該表單。如果希望阻止這一默認(rèn)行為，可以在 <el-form> 標(biāo)簽上添加 @submit.prevent。

行內(nèi)表單

當(dāng)垂直方向空間受限且表單較簡單時，可以在一行內(nèi)放置表單。


設(shè)置 inline 屬性可以讓表單域變?yōu)樾袃?nèi)的表單域

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="審批人">
    <el-input v-model="formInline.user" placeholder="審批人"></el-input>
  </el-form-item>
  <el-form-item label="活動區(qū)域">
    <el-select v-model="formInline.region" placeholder="活動區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" 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>
</template>

<script>
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: '',
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
    },
  }
</script>

對齊方式

根據(jù)具體目標(biāo)和制約因素，選擇最佳的標(biāo)簽對齊方式。


通過設(shè)置 label-position 屬性可以改變表單域標(biāo)簽的位置，可選值為 top、left，當(dāng)設(shè)為 top 時標(biāo)簽會置于表單域的頂部

<template>
  <el-radio-group v-model="labelPosition" size="small">
  <el-radio-button label="left">左對齊</el-radio-button>
  <el-radio-button label="right">右對齊</el-radio-button>
  <el-radio-button label="top">頂部對齊</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form
  :label-position="labelPosition"
  label-width="80px"
  :model="formLabelAlign"
>
  <el-form-item label="名稱">
    <el-input v-model="formLabelAlign.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區(qū)域">
    <el-input v-model="formLabelAlign.region"></el-input>
  </el-form-item>
  <el-form-item label="活動形式">
    <el-input v-model="formLabelAlign.type"></el-input>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: '',
        },
      }
    },
  }
</script>

表單驗(yàn)證

在防止用戶犯錯的前提下，盡可能讓用戶更早地發(fā)現(xiàn)并糾正錯誤。


Form 組件提供了表單驗(yàn)證的功能，只需要通過 rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。校驗(yàn)規(guī)則見 async-validator

<template>
  <el-form
  :model="ruleForm"
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item label="活動名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請選擇活動區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker
          type="date"
          placeholder="選擇日期"
          v-model="ruleForm.date1"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker
          placeholder="選擇時間"
          v-model="ruleForm.date2"
          style="width: 100%;"
        ></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質(zhì)" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')"
      >立即創(chuàng)建</el-button
    >
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '長度在 3 到 5 個字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '請選擇活動區(qū)域', trigger: 'change' },
          ],
          date1: [
            {
              type: 'date',
              required: true,
              message: '請選擇日期',
              trigger: 'change',
            },
          ],
          date2: [
            {
              type: 'date',
              required: true,
              message: '請選擇時間',
              trigger: 'change',
            },
          ],
          type: [
            {
              type: 'array',
              required: true,
              message: '請至少選擇一個活動性質(zhì)',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: '請選擇活動資源', trigger: 'change' },
          ],
          desc: [
            { required: true, message: '請?zhí)顚懟顒有问?, trigger: 'blur' },
          ],
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

自定義校驗(yàn)規(guī)則

這個例子中展示了如何使用自定義驗(yàn)證規(guī)則來完成密碼的二次驗(yàn)證。


本例還使用status-icon屬性為輸入框添加了表示校驗(yàn)結(jié)果的反饋圖標(biāo)。

<template>
  <el-form
  :model="ruleForm"
  status-icon
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item label="密碼" prop="pass">
    <el-input
      type="password"
      v-model="ruleForm.pass"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item label="確認(rèn)密碼" prop="checkPass">
    <el-input
      type="password"
      v-model="ruleForm.checkPass"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item label="年齡" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年齡不能為空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('請輸入數(shù)字值'))
          } else {
            if (value < 18) {
              callback(new Error('必須年滿18歲'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請輸入密碼'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請再次輸入密碼'))
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('兩次輸入密碼不一致!'))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
        },
        rules: {
          pass: [{ validator: validatePass, trigger: 'blur' }],
          checkPass: [{ validator: validatePass2, trigger: 'blur' }],
          age: [{ validator: checkAge, trigger: 'blur' }],
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

 自定義校驗(yàn) callback 必須被調(diào)用。 更多高級用法可參考 async-validator。

動態(tài)增減表單項

 

除了在 Form 組件上一次性傳遞所有的驗(yàn)證規(guī)則外還可以在單個的表單域上傳遞屬性的驗(yàn)證規(guī)則

<template>
  <el-form
  :model="dynamicValidateForm"
  ref="dynamicValidateForm"
  label-width="100px"
  class="demo-dynamic"
>
  <el-form-item
    prop="email"
    label="郵箱"
    :rules="[
      { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
      { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能為空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input
    ><el-button @click.prevent="removeDomain(domain)">刪除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')"
      >提交</el-button
    >
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [
            {
              value: '',
            },
          ],
          email: '',
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now(),
        })
      },
    },
  }
</script>

數(shù)字類型驗(yàn)證

 

數(shù)字類型的驗(yàn)證需要在 v-model 處加上 .number 的修飾符，這是 Vue 自身提供的用于將綁定值轉(zhuǎn)化為 number 類型的修飾符。

<template>
  <el-form
  :model="numberValidateForm"
  ref="numberValidateForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item
    label="年齡"
    prop="age"
    :rules="[
      { required: true, message: '年齡不能為空'},
      { type: 'number', message: '年齡必須為數(shù)字值'}
    ]"
  >
    <el-input
      type="age"
      v-model.number="numberValidateForm.age"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')"
      >提交</el-button
    >
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: '',
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

嵌套在 el-form-item 中的 el-form-item 標(biāo)簽寬度默認(rèn)為零，不會繼承 el-form 的 label-width。如果需要可以為其單獨(dú)設(shè)置 label-width 屬性。

表單內(nèi)組件尺寸控制

通過設(shè)置 Form 上的 size 屬性可以使該表單內(nèi)所有可調(diào)節(jié)大小的組件繼承該尺寸。Form-Item 也具有該屬性。

 

如果希望某個表單項或某個表單組件的尺寸不同于 Form 上的size屬性，直接為這個表單項或表單組件設(shè)置自己的size即可。

<template>
  <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  <el-form-item label="活動名稱">
    <el-input v-model="sizeForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區(qū)域">
    <el-select v-model="sizeForm.region" placeholder="請選擇活動區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間">
    <el-col :span="11">
      <el-date-picker
        type="date"
        placeholder="選擇日期"
        v-model="sizeForm.date1"
        style="width: 100%;"
      ></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker
        placeholder="選擇時間"
        v-model="sizeForm.date2"
        style="width: 100%;"
      ></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="活動性質(zhì)">
    <el-checkbox-group v-model="sizeForm.type">
      <el-checkbox-button
        label="美食/餐廳線上活動"
        name="type"
      ></el-checkbox-button>
      <el-checkbox-button label="地推活動" name="type"></el-checkbox-button>
      <el-checkbox-button label="線下主題活動" name="type"></el-checkbox-button>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="sizeForm.resource" size="medium">
      <el-radio border label="線上品牌商贊助"></el-radio>
      <el-radio border label="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        sizeForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
    },
  }
</script>

Form Attributes

參數(shù)說明類型可選值默認(rèn)值
model表單數(shù)據(jù)對象object——
rules表單驗(yàn)證規(guī)則object——
inline行內(nèi)表單模式boolean—false
label-position表單域標(biāo)簽的位置，如果值為 left 或者 right 時，則需要設(shè)置 label-widthstringright / left / topright
label-width表單域標(biāo)簽的寬度，例如 '50px'。作為 Form 直接子元素的 form-item 會繼承該值。支持 auto。string / number——
label-suffix表單域標(biāo)簽的后綴string——
hide-required-asterisk是否顯示必填字段的標(biāo)簽旁邊的紅色星號boolean—false
show-message是否顯示校驗(yàn)錯誤信息boolean—true
inline-message是否以行內(nèi)形式展示校驗(yàn)信息boolean—false
status-icon是否在輸入框中顯示校驗(yàn)結(jié)果反饋圖標(biāo)boolean—false
validate-on-rule-change是否在 rules 屬性改變后立即觸發(fā)一次驗(yàn)證boolean—true
size用于控制該表單內(nèi)組件的尺寸stringmedium / small / mini—
disabled是否禁用該表單內(nèi)的所有組件。若設(shè)置為 true，則表單內(nèi)組件上的 disabled 屬性不再生效boolean—false

Form Methods

方法名說明參數(shù)
validate對整個表單進(jìn)行校驗(yàn)的方法，參數(shù)為一個回調(diào)函數(shù)。該回調(diào)函數(shù)會在校驗(yàn)結(jié)束后被調(diào)用，并傳入兩個參數(shù)：是否校驗(yàn)成功和未通過校驗(yàn)的字段。若不傳入回調(diào)函數(shù)，則會返回一個 promiseFunction(callback: Function(boolean, object))
validateField對部分表單字段進(jìn)行校驗(yàn)的方法Function(props: array | string, callback: Function(errorMessage: string))
resetFields對整個表單進(jìn)行重置，將所有字段值重置為初始值并移除校驗(yàn)結(jié)果—
scrollToField滾動到指定表單字段Function(prop: string)
clearValidate移除表單項的校驗(yàn)結(jié)果。傳入待移除的表單項的 prop 屬性或者 prop 組成的數(shù)組，如不傳則移除整個表單的校驗(yàn)結(jié)果Function(props: array | string)

Form Events

事件名稱說明回調(diào)參數(shù)
validate任一表單項被校驗(yàn)后觸發(fā)被校驗(yàn)的表單項 prop 值，校驗(yàn)是否通過，錯誤消息（如果存在）

Form-Item Attributes

參數(shù)說明類型可選值默認(rèn)值
prop表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的string傳入 Form 組件的 model 中的字段—
label標(biāo)簽文本string——
label-width表單域標(biāo)簽的的寬度，例如 '50px'。支持 auto。string / number——
required是否必填，如不設(shè)置，則會根據(jù)校驗(yàn)規(guī)則自動生成boolean—false
rules表單驗(yàn)證規(guī)則, 具體配置見下表, 更多內(nèi)容參考async-validatorobject / array——
error表單域驗(yàn)證錯誤信息, 設(shè)置該值會使表單驗(yàn)證狀態(tài)變?yōu)?code>error，并顯示該錯誤信息string——
show-message是否顯示校驗(yàn)錯誤信息boolean—true
inline-message以行內(nèi)形式展示校驗(yàn)信息boolean—false
size用于控制該表單域下組件的尺寸stringmedium / small / mini—

Rules

參數(shù)說明類型可選值默認(rèn)值
trigger驗(yàn)證觸發(fā)方式stringblur / change—

Form-Item Slot

name說明
—Form Item 的內(nèi)容
label自定義標(biāo)簽，參數(shù)為 { label }
error自定義表單校驗(yàn)信息的顯示方式，參數(shù)為 { error }

Form-Item Methods

方法名說明參數(shù)
resetField對該表單項進(jìn)行重置，將其值重置為初始值并移除校驗(yàn)結(jié)果—
clearValidate移除該表單項的校驗(yàn)結(jié)果—


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號