vue基礎(chǔ)之詳解ElementUI的表單
ElementUI表單
el的表單官網(wǎng)內(nèi)容很多,看了一眼覺得心累了。但實(shí)際上它使用起來非常的方便,el為我們封裝了各種組件,樣式也大眾。
一個(gè)簡單的案例
代碼如下(使用時(shí)確保引入了相關(guān)的組件)
<template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="用戶名"><!-- form-item用于顯示關(guān)聯(lián)的文件 --> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="密碼"> <el-input type="password" v-model="form.pwd"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登錄</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', pwd:'' } } }, methods: { onSubmit() { console.log('submit!'); } } } </script>
看起來還是挺多行是嗎?去掉些必要標(biāo)簽還有些聲明,剩下的是:el-form
,el-input
,el-form-item
三個(gè)組件。el-form
是必要的,對布局有影響,el-form-item
是做為關(guān)聯(lián)表單元素的文字,el-input
便是我們的輸入框了。布局已經(jīng)預(yù)設(shè),用這三個(gè)便可以是最基本的表單了。是否方便?
表單的主要組件
常用的表單組件,輸入框,下拉框,單選框,多選框,文本域,對應(yīng)的組件是:Form
,FormItem
,Input
,Select
,Option
,Checkbox
,Radio
。
還有一些同樣是實(shí)用組件,開關(guān)(Switch
)、日期選擇器(DatePicker
),時(shí)間選擇器(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) // ...需要哪些引入哪些
假設(shè)在form.vue
中使用,代碼多了看了煩,我只寫一個(gè)下拉框、開關(guān)、文本域。(這叫拋磚引玉,xixi)
<template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活動區(qū)域"> <!-- 記得使用v-model來綁定表單字段 --> <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="即時(shí)配送"> <!-- 記得使用v-model來綁定表單字段 --> <el-switch v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="活動形式"> <!-- 記得使用v-model來綁定表單字段 --> <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: { region: '',// 區(qū)域 delivery: false,// 是否及時(shí)配送 desc: '' //活動形式描述 } } }, methods: { onSubmit() { console.log('submit!'); } } } </script>
效果如下
行內(nèi)的表單
不難發(fā)現(xiàn)我們的組件都是再一個(gè)組件站一行,如果要使組件變?yōu)樾袃?nèi)元素也肥腸簡單。給el-form
組件添加:inline="true"
的屬性即可(屬性前加冒號才會認(rèn)值為true是一個(gè)布爾,否將認(rèn)為是字符串)
<el-form :inline="true"> <!--// 如此即可 --> </el-form>
對齊方式
**這里的對齊指的是label的文本對齊方式。**同樣是加載el-form
組件的label-position
屬性中
label-position
的可用值: left
,right
,top
(top為label在上,組件再下的顯示,不在同一行)。如下
<el-form label-position="left"> <!--// 如此即可 --> </el-form>
表單驗(yàn)證
表單驗(yàn)證的關(guān)鍵點(diǎn)有三:
1.el-form
組件中添加:rules
="規(guī)則組對象"屬性添加,值為驗(yàn)證規(guī)則的對象
2.表單組件添加prop
屬性為組件指定驗(yàn)證規(guī)則。prop屬性加在el-form-item
上
3.定義驗(yàn)證規(guī)則的對象
驗(yàn)證一般用于輸入框
如下代碼:
<template> <el-form ref="form" :rules="rules" :model="form" label-width="180px"> <el-form-item label="活動名稱,長度限制" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="url,類型限制" prop="u"> <el-input v-model="form.url"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', url:'', }, rules:{ name:[ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個(gè)字符', trigger: 'blur' } ], u:[ { type: 'url', required: true, message: '必須為規(guī)范的url地址', trigger: 'change' } ] }, } }, } } </script>
重點(diǎn)提一下,如過要驗(yàn)證數(shù)字類型,那么。需要把v-model
換成v-model.number
!!! 切記 ?。?!
<el-form-item label="url,類型限制" prop="u"> <!-- 加上.number修飾符才會把輸入值轉(zhuǎn)為數(shù)字類型 --> <el-input v-model.number="form.num"></el-input> </el-form-item>
自定義的驗(yàn)證規(guī)則
自定義驗(yàn)證與預(yù)定義驗(yàn)證的不同在于一點(diǎn)(考考你,共有哪三個(gè)關(guān)鍵點(diǎn)):
自定義規(guī)則對象的編寫形式
<script> export default { data() { let checkNum = (rules,val,callback)=>{ rules // 這里會得到定義的校驗(yàn)對象的屬性 if(!Number.isInteger(val)){ // 如果要提示錯(cuò)誤信息,那么通過第三個(gè)參數(shù)回調(diào)出去,參數(shù)值為Error實(shí)例 callback(new Error('請輸入數(shù)值')) } } return { // 校驗(yàn)規(guī)則 rules:{ u:[ { type: 'url', required: true, message: '必須為規(guī)范的url地址', trigger: 'change' }, // 添加一條自定義的驗(yàn)證,值為函數(shù)名 {validator:checkNum,targger:'change'} ], }, } } } </script>
表單內(nèi)組件尺寸控制
通過給el-form
添加size屬性,來指定表單元素的尺寸。很簡單,如下
size
的可用值:medium / small / mini
<el-form size="miniz"> </el-form>
總結(jié)form模塊的屬性
屬性 | 屬性值 | 說明 |
---|---|---|
model | object | 表單數(shù)據(jù)對象 |
rules | object | 驗(yàn)證規(guī)則 |
inline | Boolean 默認(rèn)false | 是否設(shè)置為行內(nèi)元素 |
label-position | right/left/top 默認(rèn)right | 表單域標(biāo)簽對齊方式 |
label-width | string 例如150px | 標(biāo)簽標(biāo)簽(label)的寬度 |
size | medium / small / mini | 表單組件尺寸 |
status-icon | boolean 默認(rèn)false | 是否顯示校驗(yàn)結(jié)果的icon |
disabled | boolean 默認(rèn)false | 作用域?yàn)檎麄€(gè)表單。不用多解釋了 |
form模塊的方法
Form Methods(官方文檔的,了解一下)
方法名 | 說明 | 參數(shù) |
---|---|---|
validate | 對整個(gè)表單進(jìn)行校驗(yàn)的方法,參數(shù)為一個(gè)回調(diào)函數(shù)。該回調(diào)函數(shù)會在校驗(yàn)結(jié)束后被調(diào)用,并傳入兩個(gè)參數(shù):是否校驗(yàn)成功和未通過校驗(yàn)的字段。若不傳入回調(diào)函數(shù),則會返回一個(gè) promise | Function(callback: Function(boolean, object)) |
validateField | 對部分表單字段進(jìn)行校驗(yàn)的方法 | Function(props: array | string, callback: Function(errorMessage: string)) |
resetFields | 對整個(gè)表單進(jìn)行重置,將所有字段值重置為初始值并移除校驗(yàn)結(jié)果 | — |
clearValidate | 移除表單項(xiàng)的校驗(yàn)結(jié)果。傳入待移除的表單項(xiàng)的 prop 屬性或者 prop 組成的數(shù)組,如不傳則移除整個(gè)表單的校驗(yàn)結(jié)果 | Function(props: array | string) |
如何使用這些方法?
<template> <el-form ref="f"> </el-form> </template> <script> // 重置表單 const from = this.$refs.f.resetFields() </script>
form-item模塊的屬性
參數(shù) | 參數(shù)值 | 說明 |
---|---|---|
prop | string | 傳入model的字段。在使用 validate、resetFields 方法的情況下,該屬性是必填的 |
label | string | tag text |
label-width | string | 例如150px。標(biāo)簽占用的框度 |
required | boolean | 是否必填 |
rules | object | 表單校驗(yàn)規(guī)則 |
size | medium / small / mini | 組件尺寸 |
show-message | boolean 默認(rèn)true | 是否顯示校驗(yàn)錯(cuò)誤信息 |
inline-message | boolean 默認(rèn)false | 以行內(nèi)形式展示校驗(yàn)信息 |
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
離線搭建vue環(huán)境運(yùn)行項(xiàng)目詳細(xì)步驟
由于公司要求在內(nèi)網(wǎng)開發(fā)項(xiàng)目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2023-11-11Vue與.net?Core?接收List<T>泛型參數(shù)
這篇文章主要介紹了Vue與.net?Core?接收List<T>泛型參數(shù),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-04-04nginx部署訪問vue-cli搭建的項(xiàng)目的方法
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來和大家探討一下,Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎,本文將圍繞此問題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的,感興趣的小伙伴可以了解一下2023-08-08解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題
這篇文章介紹了解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios
axios是一個(gè)基于promise的HTTP庫,可以用在瀏覽器和?node.js?中,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02vue在同一個(gè)頁面重復(fù)引用相同組件如何區(qū)分二者
這篇文章主要介紹了vue在同一個(gè)頁面重復(fù)引用相同組件如何區(qū)分二者,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08