element-ui庫的表單元素的總結

表單元素挺多的，這裏簡單總結下，我以個人方式主要分爲：文本框類、選擇類、其餘類

• 文本框類
• 選擇類
• 其餘類

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>