怎么在element中使用表單元素

今天就跟大家聊聊有關怎么在element中使用表單元素，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

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" placeholder="請輸入內容" 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-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設置不能選。需要分組用el-option-group，遠程搜索和創建條目參考官網
el-select可設置：clearable清空，multiple多選(多選的時候值請務必是數組)，filterable可以搜索選項
el-option可設置：slot設置自定義的樣式

  <!-- options: [{ value:1, label: '黃金糕' }, { 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-cascader 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中使用表單元素有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。