表單元素挺多的，這裡簡單總結下，我以我的方式主要分為：文字框類、選擇類、其他類

• 文字框類
• 選擇類
• 其他類

TL;DR

• 時間類的選擇器，均可設定輸入框的顯示樣式和值的形式，屬性分別為format、value-format
• 單選框和複選框，選中項屬性的label值就是model的值
• 複選框，如果是多選的話，務必設定model值是陣列

文字框類

這裡我統一將有文字框的元素放在一起。主要有：普通文字框、密碼框、文字域、計數器、日期選擇器、自動填充文字框、有字首的文字框。

普通文字框：disabled是否禁用，clearable是否可清空，maxlength/minlength字元的長度，show-word-limit顯示字數統計，prefix-icon/suffix-icon首尾部的顯示圖示，size指定輸入框的尺寸(large small mini)，

<el-input v-model="xx" placeholdwww.cppcns.comer="請輸入內容" 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="請輸入內容" >

文字域：必須有type="textarea"，rows控制高度(注意是數字，需要加:)，autosize讓高度根據內容自行調整(還可設定最小行數和最大行數)

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

計數器：僅允許輸入標準的數字值，方便的加減數字程式設計客棧，min/max控制最大最小值，steps控制步長

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

複合型輸入框：可前置或後置元素(slot)

  <el-input placeholder="請輸入內容" v-model="xx">
    <template slot="prepend">Http://</template>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>

帶輸入建議的輸入框，較複雜需要再看吧，el-autocomplete

日期選擇器，有點麻煩，單獨一部分講

日期時間選擇器

這裡特別強調的是：輸入框裡顯示的格式(format)和繫結值的格式(value-format)可以控制！！！！
這裡特別強調的是：輸入框裡顯示的格式(format)和繫結值的格式(value-format)可以控制！！！！
這裡特別強調的是：輸入框裡顯示的格式(format)和繫結值的格式(value-format)可以控制！！！！
年是yyyy，月是MM，日是dd，時是HH，分是mm，秒是ss，周是WW（只限於周選擇器）。通用的是yyyy-MM-dd HH:mm:ss。

注意的坑:

• 除了年，都可以單個，單個表示一位數的時候不補0。
• HH是24小時制，hh是12小時制！！！！
• value-format有個特殊的timestamp型別，format有A型別(AM/PM)
• 不設定value-format，預設是這種Fri Oct 18 2019 11:27:54 GMT+0800 (China Standard Time)，通常會設定成timestamp，13位的
• 開始和結束選擇的值是陣列

選擇的型別如下：

時間選擇器：picker-options設定選擇的範圍。

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

開始和結束時間選擇器：必須有is-range屬性，align對齊方式，range-separator分隔符，預設是-，start-placeholder和end-placeholder，

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

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

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

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

<el-date-picker 程式設計客棧v-model="value1" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"> </el-date-picker>

日期時間選擇器：必須type="datetime"

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

開始和結束日期時間選擇器：必須type="datetimerange"，default-time可以設定預設時間

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

選擇類

所有的選擇類的表單元素，都有類似於options的選項，注意model的值和選項中的那個屬性值掛鉤。
option基本統一的模式是{label:'看到的',value:'提交給後臺的值'}，但是radio和chebox很奇怪，label的選項居然就是value，寫的時候特別注意！！！

單選框：model繫結的值是選中項的label值，model值就是預設項，undefined就沒有預設項。border就會有邊框。想要變成按鈕樣式的就用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>

複選框：model的值有兩種型別：Boolean和Array。Boolean的時候就是，選項是否都勾選。Array的時候，選中項的label值會出現在陣列中。indeterminate是true的時候是表示部分選中，用於實現全選的效果。border是帶上邊框
el-checkbox-group標籤，min和max表示勾選專案的數量，size是尺寸，el-checkbox-button是按鈕形式

<el-checkbox v-modelwww.cppcns.com="checked" indeterminate>全選</el-checkbox>
  <el-checkbox-group v-model="checkList">
    <!-- options: [{ 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設定不能選。需要分組用el-option-group，遠端搜尋和建立條目參考官網
el-select可設定：clearable清空，multiple多選(多選的時候值請務必是陣列)，filterable可以搜尋選項
el-option可設定：slot設定自定義的樣式

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

級聯下拉框：model是陣列，索引對應級別。options是類似於遞迴的模式([{value:1,label:'bj',children:[{value:2,label:'haidian'}]}])，預設觸發方式是click，可以hover:props={expandTrigger:'hover'}

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

其他類

開關：model值是Boolean，可以使用active-color屬性與inactive-color屬性來設定開關的背景色

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

滑塊：預設是0-100，可以formatTooltip格式化顯示的值

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

評分、顏色、穿梭框、沒用，用的時候再說吧~~

上傳：挺複雜的，這邊我只是簡單羅列下我知道的。accept限制上傳檔案的格式，auto-upload要不要自動上傳，limit上傳的數量，file-list檔案顯示的列表，list-type顯示的方式，on-exceed超出了檔案數的鉤子，on-change檔案變化的鉤子，on-remove的移除檔案的鉤子。鉤子的預設引數大多有file，filelist。

• file-list一般可能需要用computed算出來，因為在編輯狀態下，應該直接有圖片連結。
• 第一個檔案可以通過this.$refs.eventImage.uploadFiles[0].raw
• 校驗的時候，有時不一定能準確判斷file的值存不存在，需要手動設定規則，每次上傳之後。上傳同一個圖片可能不行的bug需要每次上傳之後設定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>

到此這篇關於element的表單元素使用總結的文章就介紹到這了,更多相關element 表單內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！