腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

element的表單元素使用總結(jié)

更新時(shí)間：2021年06月02日 10:55:55 作者：顏醬

表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價(jià)值，感興趣的可以了解一下

表單元素挺多的，這里簡(jiǎn)單總結(jié)下，我以我的方式主要分為：文本框類、選擇類、其他類

文本框類
選擇類
其他類

TL;DR

時(shí)間類的選擇器，均可設(shè)置輸入框的顯示樣式和值的形式，屬性分別為format、value-format
單選框和復(fù)選框，選中項(xiàng)屬性的label值就是model的值
復(fù)選框，如果是多選的話，務(wù)必設(shè)置model值是數(shù)組

文本框類

這里我統(tǒng)一將有文本框的元素放在一起。主要有：普通文本框、密碼框、文本域、計(jì)數(shù)器、日期選擇器、自動(dòng)填充文本框、有前綴的文本框。

普通文本框：disabled是否禁用，clearable是否可清空，maxlength/minlength字符的長度，show-word-limit顯示字?jǐn)?shù)統(tǒng)計(jì)，prefix-icon/suffix-icon首尾部的顯示圖標(biāo)，size指定輸入框的尺寸(large small mini)，

<el-input v-model="xx" placeholder="請(qǐng)輸入內(nèi)容" disabled clearable maxlength="10" show-word-limit prefix-icon="el-icon-search" suffix-icon="el-icon-date" size="mini">

密碼框：必須有show-password

<el-input show-password v-model="xx" placeholder="請(qǐng)輸入內(nèi)容" >

文本域：必須有type="textarea"，rows控制高度(注意是數(shù)字，需要加:)，autosize讓高度根據(jù)內(nèi)容自行調(diào)整(還可設(shè)置最小行數(shù)和最大行數(shù))

<el-inut type="textarea" v-model="xx" :rows="2" autosize>

計(jì)數(shù)器：僅允許輸入標(biāo)準(zhǔn)的數(shù)字值，方便的加減數(shù)字，min/max控制最大最小值，steps控制步長

<el-input-number v-model="num" :min="1" :max="10" :steps="2"></el-input-number>

復(fù)合型輸入框：可前置或后置元素(slot)

  <el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="xx">
    <template slot="prepend">Http://</template>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>

帶輸入建議的輸入框，較復(fù)雜需要再看吧，el-autocomplete

日期選擇器，有點(diǎn)麻煩，單獨(dú)一部分講

日期時(shí)間選擇器

這里特別強(qiáng)調(diào)的是：輸入框里顯示的格式(format)和綁定值的格式(value-format)可以控制?。。?！
這里特別強(qiáng)調(diào)的是：輸入框里顯示的格式(format)和綁定值的格式(value-format)可以控制?。。?！
這里特別強(qiáng)調(diào)的是：輸入框里顯示的格式(format)和綁定值的格式(value-format)可以控制！?。?！
年是yyyy，月是MM，日是dd，時(shí)是HH，分是mm，秒是ss，周是WW（只限于周選擇器）。通用的是yyyy-MM-dd HH:mm:ss。

注意的坑:

除了年，都可以單個(gè)，單個(gè)表示一位數(shù)的時(shí)候不補(bǔ)0。
HH是24小時(shí)制，hh是12小時(shí)制！?。。?/li>
value-format有個(gè)特殊的timestamp類型，format有A類型(AM/PM)
不設(shè)置value-format，默認(rèn)是這種Fri Oct 18 2019 11:27:54 GMT+0800 (China Standard Time)，通常會(huì)設(shè)置成timestamp，13位的
開始和結(jié)束選擇的值是數(shù)組

選擇的類型如下：

時(shí)間選擇器：picker-options設(shè)置選擇的范圍。

<el-time-picker v-model="xx" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="選擇時(shí)間">

開始和結(jié)束時(shí)間選擇器：必須有is-range屬性，align對(duì)齊方式，range-separator分隔符，默認(rèn)是-，start-placeholder和end-placeholder，

<el-time-picker is-range v-model="value1" align="center" range-separator="至" start-placeholder="開始時(shí)間" end-placeholder="結(jié)束時(shí)間"></el-time-picker>

日期選擇器：必須要type，控制類型(date、week、month、year、dates)

<el-date-picker type="date" v-model="value1" placeholder="選擇日期"> </el-date-picker>

開始和結(jié)束日期選擇器：必須type，控制類型(daterange、weekrange、monthrange、yearrange)

<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期"> </el-date-picker>

日期時(shí)間選擇器：必須type="datetime"

<el-date-picker type="datetime" v-model="value1" placeholder="選擇日期時(shí)間"> </el-date-picker>

開始和結(jié)束日期時(shí)間選擇器：必須type="datetimerange"，default-time可以設(shè)置默認(rèn)時(shí)間

<el-date-picker type="datetimerange" v-model="value1" range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期"> </el-date-picker>

選擇類

所有的選擇類的表單元素，都有類似于options的選項(xiàng)，注意model的值和選項(xiàng)中的那個(gè)屬性值掛鉤。
option基本統(tǒng)一的模式是{label:'看到的',value:'提交給后臺(tái)的值'}，但是radio和chebox很奇怪，label的選項(xiàng)居然就是value，寫的時(shí)候特別注意?。?！

單選框：model綁定的值是選中項(xiàng)的label值，model值就是默認(rèn)項(xiàng)，undefined就沒有默認(rèn)項(xiàng)。border就會(huì)有邊框。想要變成按鈕樣式的就用el-radio-button

  <!-- options: [{ value:1, label: '黃金糕' }, { value:1, label: '雙皮奶' }] -->
  <el-radio-group v-model="radio">
    <el-radio v-for="item in options" :key="item.value" :label="item.value" >{{item.label}}</el-radio>
  </el-radio-group>

復(fù)選框：model的值有兩種類型：Boolean和Array。Boolean的時(shí)候就是，選項(xiàng)是否都勾選。Array的時(shí)候，選中項(xiàng)的label值會(huì)出現(xiàn)在數(shù)組中。indeterminate是true的時(shí)候是表示部分選中，用于實(shí)現(xiàn)全選的效果。border是帶上邊框
el-checkbox-group標(biāo)簽，min和max表示勾選項(xiàng)目的數(shù)量，size是尺寸，el-checkbox-button是按鈕形式

<el-checkbox v-model="checked" indeterminate>全選</el-checkbox>
  <el-checkbox-group v-model="checkList">
    <!-- options: [{ value:1, label: '黃金糕' }, { value:1, label: '雙皮奶' }] -->
    <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>

下拉框：model的值是選中的option的value值，disabled設(shè)置不能選。需要分組用el-option-group，遠(yuǎn)程搜索和創(chuàng)建條目參考官網(wǎng)
el-select可設(shè)置：clearable清空，multiple多選(多選的時(shí)候值請(qǐng)務(wù)必是數(shù)組)，filterable可以搜索選項(xiàng)
el-option可設(shè)置：slot設(shè)置自定義的樣式

  <!-- options: [{ value:1, label: '黃金糕' }, { value:1, label: '雙皮奶' }] -->
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  </el-select>

級(jí)聯(lián)下拉框：model是數(shù)組，索引對(duì)應(yīng)級(jí)別。options是類似于遞歸的模式([{value:1,label:'bj',children:[{value:2,label:'haidian'}]}])，默認(rèn)觸發(fā)方式是click，可以hover:props={expandTrigger:'hover'}

<el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>

其他類

開關(guān)：model值是Boolean，可以使用active-color屬性與inactive-color屬性來設(shè)置開關(guān)的背景色

<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>

滑塊：默認(rèn)是0-100，可以formatTooltip格式化顯示的值

<el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>

評(píng)分、顏色、穿梭框、沒用，用的時(shí)候再說吧~~

上傳：挺復(fù)雜的，這邊我只是簡(jiǎn)單羅列下我知道的。accept限制上傳文件的格式，auto-upload要不要自動(dòng)上傳，limit上傳的數(shù)量，file-list文件顯示的列表，list-type顯示的方式，on-exceed超出了文件數(shù)的鉤子，on-change文件變化的鉤子，on-remove的移除文件的鉤子。鉤子的默認(rèn)參數(shù)大多有file，filelist。

file-list一般可能需要用computed算出來，因?yàn)樵诰庉嫚顟B(tài)下，應(yīng)該直接有圖片鏈接。
第一個(gè)文件可以通過this.$refs.eventImage.uploadFiles[0].raw
校驗(yàn)的時(shí)候，有時(shí)不一定能準(zhǔn)確判斷file的值存不存在，需要手動(dòng)設(shè)置規(guī)則，每次上傳之后。上傳同一個(gè)圖片可能不行的bug需要每次上傳之后設(shè)置this.$refs[ref名].value = ''

<el-upload ref="eventImage" accept="image/*" :auto-upload="false" action="" :limit="1" :file-list="fileListUploaded" list-type="picture-card" :on-exceed="exceedFile" :on-change="changeFile" :on-remove="removeImage" ></el-upload>

到此這篇關(guān)于element的表單元素使用總結(jié)的文章就介紹到這了,更多相關(guān)element 表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: