Element-UI組件之表單Form

• Radio 單選框
• • 基礎用法
  • 禁用狀態
  • 單選框組
  • 按鈕樣式
  • 帶有邊框
• Checkbox 多選框
• • 基礎用法
  • 禁用狀態
  • 多選框組
  • indeterminate 狀態
  • 可選項目數量的限制
  • 按鈕樣式
  • 帶有邊框
• Input 輸入框
• • 基礎用法
  • 禁用狀態
  • 可清空
  • 密碼框
  • 帶 icon 的輸入框
  • 文本域
  • 可自適應文本高度的文本域
  • 復合型輸入框
  • 尺寸
  • 帶輸入建議
  • 自定義模板
  • 遠程搜索
  • 輸入長度限制
• InputNumber 計數器
• • 基礎用法
  • 禁用狀態
  • 步數
  • 嚴格步數
  • 精度
  • 尺寸
  • 按鈕位置
• Select 選擇器
• • 基礎用法
  • 有禁用選項
  • 禁用狀態
  • 可清空單選
  • 自定義模板
  • 分組
  • 可搜索
  • 遠程搜索
  • 創建條目
• Cascader 級聯選擇器
• • 基礎用法
  • 禁用選項
  • 可清空
  • 僅顯示最后一級
  • 標題
  • 選擇任意一級選項
  • 動態加載
  • 可搜索
  • 自定義節點內容
  • 級聯面板
• Switch 開關
• • 基本用法
  • 文字描述
  • 擴展的 value 類型
  • 禁用狀態
• Slider 滑塊
• • 基礎用法
  • 離散值
  • 帶有輸入框
  • 范圍選擇
  • 豎向模式
  • 展示標記
• TimePicker 時間選擇器
• • 固定時間點
  • 任意時間點
  • 固定時間范圍
  • 任意時間范圍
• DatePicker 日期選擇器
• • 選擇日
  • 其他日期單位
  • 選擇日期范圍
  • 選擇月份范圍
  • 日期格式
  • 默認顯示日期
• DateTimePicker 日期時間選擇器
• • 日期和時間點
  • 日期和時間范圍
  • 標題
• Upload 上傳
• • 點擊上傳
  • 用戶頭像上傳
  • 照片墻
  • 文件縮略圖
  • 標題
  • 上傳文件列表控制
  • 拖拽上傳
  • 手動上傳
• Rate 評分
• • 基礎用法
  • 輔助文字
  • 其它 icon
  • 只讀
• ColorPicker 顏色選擇器
• • 基礎用法
  • 選擇透明度
  • 預定義顏色
  • 不同尺寸
• Transfer 穿梭框
• • 基礎用法
  • 可搜索
  • 可自定義
  • 數據項屬性別名
• Form 表單
• • 典型表單
  • 行內表單
  • 對齊方式
  • 表單驗證
  • 自定義校驗規則
  • 動態增減表單項
  • 數字類型驗證
  • 表單內組件尺寸控制

Radio 單選框

基礎用法

<template><el-radio v-model="radio" label="1">備選項</el-radio><el-radio v-model="radio" label="2">備選項</el-radio>
</template><script>export default {data () {return {radio: '1'};}}
</script>

禁用狀態

<template><el-radio disabled v-model="radio" label="禁用">備選項</el-radio><el-radio disabled v-model="radio" label="選中且禁用">備選項</el-radio>
</template><script>export default {data () {return {radio: '選中且禁用'};}}
</script>

單選框組

<template><el-radio-group v-model="radio"><el-radio :label="3">備選項</el-radio><el-radio :label="6">備選項</el-radio><el-radio :label="9">備選項</el-radio></el-radio-group>
</template><script>export default {data () {return {radio: 3};}}
</script>

按鈕樣式

<template><div><el-radio-group v-model="radio1"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio2" size="medium"><el-radio-button label="上海" ></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京" disabled ></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" disabled size="mini"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div>
</template><script>export default {data () {return {radio1: '上海',radio2: '上海',radio3: '上海',radio4: '上海'};}}
</script>

帶有邊框

<template><div><el-radio v-model="radio1" label="1" border>備選項1</el-radio><el-radio v-model="radio1" label="2" border>備選項2</el-radio></div><div style="margin-top: 20px"><el-radio v-model="radio2" label="1" border size="medium">備選項1</el-radio><el-radio v-model="radio2" label="2" border size="medium">備選項2</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio label="1" border>備選項1</el-radio><el-radio label="2" border disabled>備選項2</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" size="mini" disabled><el-radio label="1" border>備選項1</el-radio><el-radio label="2" border>備選項2</el-radio></el-radio-group></div>
</template><script>export default {data () {return {radio1: '1',radio2: '1',radio3: '1',radio4: '1'};}}
</script>

Checkbox 多選框

基礎用法

<template><!-- `checked` 為 true 或 false --><el-checkbox v-model="checked">備選項</el-checkbox>
</template>
<script>export default {data() {return {checked: true};}};
</script>

禁用狀態

<template><el-checkbox v-model="checked1" disabled>備選項1</el-checkbox><el-checkbox v-model="checked2" disabled>備選項</el-checkbox>
</template>
<script>export default {data() {return {checked1: false,checked2: true};}};
</script>

多選框組

<template><el-checkbox-group v-model="checkList"><el-checkbox label="復選框 A"></el-checkbox><el-checkbox label="復選框 B"></el-checkbox><el-checkbox label="復選框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="選中且禁用" disabled></el-checkbox></el-checkbox-group>
</template><script>export default {data () {return {checkList: ['選中且禁用','復選框 A']};}};
</script>

indeterminate 狀態

<template><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group>
</template>
<script>const cityOptions = ['上海', '北京', '廣州', '深圳'];export default {data() {return {checkAll: false,checkedCities: ['上海', '北京'],cities: cityOptions,isIndeterminate: true};},methods: {handleCheckAllChange(val) {this.checkedCities = val ? cityOptions : [];this.isIndeterminate = false;},handleCheckedCitiesChange(value) {let checkedCount = value.length;this.checkAll = checkedCount === this.cities.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;}}};
</script>

可選項目數量的限制

<template><el-checkbox-group v-model="checkedCities":min="1":max="2"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group>
</template>
<script>const cityOptions = ['上海', '北京', '廣州', '深圳'];export default {data() {return {checkedCities: ['上海', '北京'],cities: cityOptions};}};
</script>

按鈕樣式

<template><div><el-checkbox-group v-model="checkboxGroup1"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup2" size="medium"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup3" size="small"><el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup4" size="mini" disabled><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div>
</template>
<script>const cityOptions = ['上海', '北京', '廣州', '深圳'];export default {data () {return {checkboxGroup1: ['上海'],checkboxGroup2: ['上海'],checkboxGroup3: ['上海'],checkboxGroup4: ['上海'],cities: cityOptions};}}
</script>

帶有邊框

<template><div><el-checkbox v-model="checked1" label="備選項1" border></el-checkbox><el-checkbox v-model="checked2" label="備選項2" border></el-checkbox></div><div style="margin-top: 20px"><el-checkbox v-model="checked3" label="備選項1" border size="medium"></el-checkbox><el-checkbox v-model="checked4" label="備選項2" border size="medium"></el-checkbox></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup1" size="small"><el-checkbox label="備選項1" border></el-checkbox><el-checkbox label="備選項2" border disabled></el-checkbox></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup2" size="mini" disabled><el-checkbox label="備選項1" border></el-checkbox><el-checkbox label="備選項2" border></el-checkbox></el-checkbox-group></div>
</template><script>export default {data () {return {checked1: true,checked2: false,checked3: false,checked4: true,checkboxGroup1: [],checkboxGroup2: []};}}
</script>

Input 輸入框

基礎用法

<el-input v-model="input" placeholder="請輸入內容"></el-input><script>
export default {data() {return {input: ''}}
}
</script>

禁用狀態

<el-inputplaceholder="請輸入內容"v-model="input":disabled="true">
</el-input><script>
export default {data() {return {input: ''}}
}
</script>

可清空

<el-inputplaceholder="請輸入內容"v-model="input"clearable>
</el-input><script>export default {data() {return {input: ''}}}
</script>

密碼框

<el-input placeholder="請輸入密碼" v-model="input" show-password></el-input><script>export default {data() {return {input: ''}}}
</script>

帶 icon 的輸入框

<div class="demo-input-suffix">屬性方式：<el-inputplaceholder="請選擇日期"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputplaceholder="請輸入內容"prefix-icon="el-icon-search"v-model="input2"></el-input>
</div>
<div class="demo-input-suffix">slot 方式：<el-inputplaceholder="請選擇日期"v-model="input3"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input><el-inputplaceholder="請輸入內容"v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div><script>
export default {data() {return {input1: '',input2: '',input3: '',input4: ''}}
}
</script>

文本域

<el-inputtype="textarea":rows="2"placeholder="請輸入內容"v-model="textarea">
</el-input><script>
export default {data() {return {textarea: ''}}
}
</script>

可自適應文本高度的文本域

<el-inputtype="textarea"autosizeplaceholder="請輸入內容"v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4}"placeholder="請輸入內容"v-model="textarea2">
</el-input><script>
export default {data() {return {textarea1: '',textarea2: ''}}
}
</script>

復合型輸入框

<div><el-input placeholder="請輸入內容" v-model="input1"><template slot="prepend">Http://</template></el-input>
</div>
<div style="margin-top: 15px;"><el-input placeholder="請輸入內容" v-model="input2"><template slot="append">.com</template></el-input>
</div>
<div style="margin-top: 15px;"><el-input placeholder="請輸入內容" v-model="input3" class="input-with-select"><el-select v-model="select" slot="prepend" placeholder="請選擇"><el-option label="餐廳名" value="1"></el-option><el-option label="訂單號" value="2"></el-option><el-option label="用戶電話" value="3"></el-option></el-select><el-button slot="append" icon="el-icon-search"></el-button></el-input>
</div>
<style>.el-select .el-input {width: 130px;}.input-with-select .el-input-group__prepend {background-color: #fff;}
</style>
<script>
export default {data() {return {input1: '',input2: '',input3: '',select: ''}}
}
</script>

尺寸

<div class="demo-input-size"><el-inputplaceholder="請輸入內容"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputsize="medium"placeholder="請輸入內容"suffix-icon="el-icon-date"v-model="input2"></el-input><el-inputsize="small"placeholder="請輸入內容"suffix-icon="el-icon-date"v-model="input3"></el-input><el-inputsize="mini"placeholder="請輸入內容"suffix-icon="el-icon-date"v-model="input4"></el-input>
</div><script>
export default {data() {return {input1: '',input2: '',input3: '',input4: ''}}
}
</script>

帶輸入建議

<el-row class="demo-autocomplete"><el-col :span="12"><div class="sub-title">激活即列出輸入建議</div><el-autocompleteclass="inline-input"v-model="state1":fetch-suggestions="querySearch"placeholder="請輸入內容"@select="handleSelect"></el-autocomplete></el-col><el-col :span="12"><div class="sub-title">輸入后匹配輸入建議</div><el-autocompleteclass="inline-input"v-model="state2":fetch-suggestions="querySearch"placeholder="請輸入內容":trigger-on-focus="false"@select="handleSelect"></el-autocomplete></el-col>
</el-row>
<script>export default {data() {return {restaurants: [],state1: '',state2: ''};},methods: {querySearch(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;// 調用 callback 返回建議列表的數據cb(results);},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},loadAll() {return [{ "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },{ "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },{ "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" },{ "value": "瀧千家(天山西路店)", "address": "天山西路438號" },{ "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長寧區金鐘路968號1幢18號樓一層商鋪18-101" },{ "value": "貢茶", "address": "上海市長寧區金鐘路633號" },{ "value": "豪大大香雞排超級奶爸", "address": "上海市嘉定區曹安公路曹安路1685號" },{ "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區同普路1435號" },{ "value": "十二瀧町", "address": "上海市北翟路1444弄81號B幢-107" },{ "value": "星移濃縮咖啡", "address": "上海市嘉定區新郁路817號" },{ "value": "阿姨奶茶/豪大大", "address": "嘉定區曹安路1611號" },{ "value": "新麥甜四季甜品炸雞", "address": "嘉定區曹安公路2383弄55號" },{ "value": "Monica摩托主題咖啡店", "address": "嘉定區江橋鎮曹安公路2409號1F，2383弄62號1F" },{ "value": "浮生若茶（凌空soho店）", "address": "上海長寧區金鐘路968號9號樓地下一層" },{ "value": "NONO JUICE  鮮榨果汁", "address": "上海市長寧區天山西路119號" },{ "value": "CoCo都可(北新涇店）", "address": "上海市長寧區仙霞西路" },{ "value": "快樂檸檬（神州智慧店）", "address": "上海市長寧區天山西路567號1層R117號店鋪" },{ "value": "Merci Paul cafe", "address": "上海市普陀區光復西路丹巴路28弄6號樓819" },{ "value": "貓山王（西郊百聯店）", "address": "上海市長寧區仙霞西路88號第一層G05-F01-1-306" },{ "value": "槍會山", "address": "上海市普陀區棕櫚路" },{ "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號" },{ "value": "錢記", "address": "上海市長寧區天山西路" },{ "value": "壹杯加", "address": "上海市長寧區通協路" },{ "value": "唦哇嘀咖", "address": "上海市長寧區新涇鎮金鐘路999號2幢（B幢）第01層第1-02A單元" },{ "value": "愛茜茜里(西郊百聯)", "address": "長寧區仙霞西路88號1305室" },{ "value": "愛茜茜里(近鐵廣場)", "address": "上海市普陀區真北路818號近鐵城市廣場北區地下二樓N-B2-O2-C商鋪" },{ "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區金沙江路2239號金沙和美廣場B1-10-6" },{ "value": "開心麗果（繽谷店）", "address": "上海市長寧區威寧路天山路341號" },{ "value": "超級雞車（豐莊路店）", "address": "上海市嘉定區豐莊路240號" },{ "value": "妙生活果園（北新涇店）", "address": "長寧區新漁路144號" },{ "value": "香宜度麻辣香鍋", "address": "長寧區淞虹路148號" },{ "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區老真北路160號" },{ "value": "港式小鋪", "address": "上海市長寧區金鐘路968號15樓15-105室" },{ "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },{ "value": "北京餃子館", "address": "長寧區北新涇街道天山西路490-1號" },{ "value": "飯典*新簡餐（凌空SOHO店）", "address": "上海市長寧區金鐘路968號9號樓地下一層9-83室" },{ "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號地下一層甲部" },{ "value": "動力雞車", "address": "長寧區仙霞西路299弄3號101B" },{ "value": "瀏陽蒸菜", "address": "天山西路430號" },{ "value": "四海游龍（天山西路店）", "address": "上海市長寧區天山西路" },{ "value": "櫻花食堂（凌空店）", "address": "上海市長寧區金鐘路968號15樓15-105室" },{ "value": "壹分米客家傳統調制米粉(天山店)", "address": "天山西路428號" },{ "value": "福榮祥燒臘（平溪路店）", "address": "上海市長寧區協和路福泉路255弄57-73號" },{ "value": "速記黃燜雞米飯", "address": "上海市長寧區北新涇街道金鐘路180號1層01號攤位" },{ "value": "紅辣椒麻辣燙", "address": "上海市長寧區天山西路492號" },{ "value": "(小楊生煎)西郊百聯餐廳", "address": "長寧區仙霞西路88號百聯2樓" },{ "value": "陽陽麻辣燙", "address": "天山西路389號" },{ "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區金沙江路1699號鑫樂惠美食廣場A13" }];},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}}
</script>

自定義模板

<el-autocompletepopper-class="my-autocomplete"v-model="state":fetch-suggestions="querySearch"placeholder="請輸入內容"@select="handleSelect"><iclass="el-icon-edit el-input__icon"slot="suffix"@click="handleIconClick"></i><template slot-scope="{ item }"><div class="name">{{ item.value }}</div><span class="addr">{{ item.address }}</span></template>
</el-autocomplete><style>
.my-autocomplete {li {line-height: normal;padding: 7px;.name {text-overflow: ellipsis;overflow: hidden;}.addr {font-size: 12px;color: #b4b4b4;}.highlighted .addr {color: #ddd;}}
}
</style><script>export default {data() {return {restaurants: [],state: ''};},methods: {querySearch(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;// 調用 callback 返回建議列表的數據cb(results);},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},loadAll() {return [{ "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },{ "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },{ "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" },{ "value": "瀧千家(天山西路店)", "address": "天山西路438號" },{ "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長寧區金鐘路968號1幢18號樓一層商鋪18-101" },{ "value": "貢茶", "address": "上海市長寧區金鐘路633號" },{ "value": "豪大大香雞排超級奶爸", "address": "上海市嘉定區曹安公路曹安路1685號" },{ "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區同普路1435號" },{ "value": "十二瀧町", "address": "上海市北翟路1444弄81號B幢-107" },{ "value": "星移濃縮咖啡", "address": "上海市嘉定區新郁路817號" },{ "value": "阿姨奶茶/豪大大", "address": "嘉定區曹安路1611號" },{ "value": "新麥甜四季甜品炸雞", "address": "嘉定區曹安公路2383弄55號" },{ "value": "Monica摩托主題咖啡店", "address": "嘉定區江橋鎮曹安公路2409號1F，2383弄62號1F" },{ "value": "浮生若茶（凌空soho店）", "address": "上海長寧區金鐘路968號9號樓地下一層" },{ "value": "NONO JUICE  鮮榨果汁", "address": "上海市長寧區天山西路119號" },{ "value": "CoCo都可(北新涇店）", "address": "上海市長寧區仙霞西路" },{ "value": "快樂檸檬（神州智慧店）", "address": "上海市長寧區天山西路567號1層R117號店鋪" },{ "value": "Merci Paul cafe", "address": "上海市普陀區光復西路丹巴路28弄6號樓819" },{ "value": "貓山王（西郊百聯店）", "address": "上海市長寧區仙霞西路88號第一層G05-F01-1-306" },{ "value": "槍會山", "address": "上海市普陀區棕櫚路" },{ "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號" },{ "value": "錢記", "address": "上海市長寧區天山西路" },{ "value": "壹杯加", "address": "上海市長寧區通協路" },{ "value": "唦哇嘀咖", "address": "上海市長寧區新涇鎮金鐘路999號2幢（B幢）第01層第1-02A單元" },{ "value": "愛茜茜里(西郊百聯)", "address": "長寧區仙霞西路88號1305室" },{ "value": "愛茜茜里(近鐵廣場)", "address": "上海市普陀區真北路818號近鐵城市廣場北區地下二樓N-B2-O2-C商鋪" },{ "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區金沙江路2239號金沙和美廣場B1-10-6" },{ "value": "開心麗果（繽谷店）", "address": "上海市長寧區威寧路天山路341號" },{ "value": "超級雞車（豐莊路店）", "address": "上海市嘉定區豐莊路240號" },{ "value": "妙生活果園（北新涇店）", "address": "長寧區新漁路144號" },{ "value": "香宜度麻辣香鍋", "address": "長寧區淞虹路148號" },{ "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區老真北路160號" },{ "value": "港式小鋪", "address": "上海市長寧區金鐘路968號15樓15-105室" },{ "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },{ "value": "北京餃子館", "address": "長寧區北新涇街道天山西路490-1號" },{ "value": "飯典*新簡餐（凌空SOHO店）", "address": "上海市長寧區金鐘路968號9號樓地下一層9-83室" },{ "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號地下一層甲部" },{ "value": "動力雞車", "address": "長寧區仙霞西路299弄3號101B" },{ "value": "瀏陽蒸菜", "address": "天山西路430號" },{ "value": "四海游龍（天山西路店）", "address": "上海市長寧區天山西路" },{ "value": "櫻花食堂（凌空店）", "address": "上海市長寧區金鐘路968號15樓15-105室" },{ "value": "壹分米客家傳統調制米粉(天山店)", "address": "天山西路428號" },{ "value": "福榮祥燒臘（平溪路店）", "address": "上海市長寧區協和路福泉路255弄57-73號" },{ "value": "速記黃燜雞米飯", "address": "上海市長寧區北新涇街道金鐘路180號1層01號攤位" },{ "value": "紅辣椒麻辣燙", "address": "上海市長寧區天山西路492號" },{ "value": "(小楊生煎)西郊百聯餐廳", "address": "長寧區仙霞西路88號百聯2樓" },{ "value": "陽陽麻辣燙", "address": "天山西路389號" },{ "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區金沙江路1699號鑫樂惠美食廣場A13" }];},handleSelect(item) {console.log(item);},handleIconClick(ev) {console.log(ev);}},mounted() {this.restaurants = this.loadAll();}}
</script>

遠程搜索

<el-autocompletev-model="state":fetch-suggestions="querySearchAsync"placeholder="請輸入內容"@select="handleSelect"
></el-autocomplete>
<script>export default {data() {return {restaurants: [],state: '',timeout:  null};},methods: {loadAll() {return [{ "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },{ "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },{ "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" },{ "value": "瀧千家(天山西路店)", "address": "天山西路438號" },{ "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長寧區金鐘路968號1幢18號樓一層商鋪18-101" },{ "value": "貢茶", "address": "上海市長寧區金鐘路633號" },{ "value": "豪大大香雞排超級奶爸", "address": "上海市嘉定區曹安公路曹安路1685號" },{ "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區同普路1435號" },{ "value": "十二瀧町", "address": "上海市北翟路1444弄81號B幢-107" },{ "value": "星移濃縮咖啡", "address": "上海市嘉定區新郁路817號" },{ "value": "阿姨奶茶/豪大大", "address": "嘉定區曹安路1611號" },{ "value": "新麥甜四季甜品炸雞", "address": "嘉定區曹安公路2383弄55號" },{ "value": "Monica摩托主題咖啡店", "address": "嘉定區江橋鎮曹安公路2409號1F，2383弄62號1F" },{ "value": "浮生若茶（凌空soho店）", "address": "上海長寧區金鐘路968號9號樓地下一層" },{ "value": "NONO JUICE  鮮榨果汁", "address": "上海市長寧區天山西路119號" },{ "value": "CoCo都可(北新涇店）", "address": "上海市長寧區仙霞西路" },{ "value": "快樂檸檬（神州智慧店）", "address": "上海市長寧區天山西路567號1層R117號店鋪" },{ "value": "Merci Paul cafe", "address": "上海市普陀區光復西路丹巴路28弄6號樓819" },{ "value": "貓山王（西郊百聯店）", "address": "上海市長寧區仙霞西路88號第一層G05-F01-1-306" },{ "value": "槍會山", "address": "上海市普陀區棕櫚路" },{ "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號" },{ "value": "錢記", "address": "上海市長寧區天山西路" },{ "value": "壹杯加", "address": "上海市長寧區通協路" },{ "value": "唦哇嘀咖", "address": "上海市長寧區新涇鎮金鐘路999號2幢（B幢）第01層第1-02A單元" },{ "value": "愛茜茜里(西郊百聯)", "address": "長寧區仙霞西路88號1305室" },{ "value": "愛茜茜里(近鐵廣場)", "address": "上海市普陀區真北路818號近鐵城市廣場北區地下二樓N-B2-O2-C商鋪" },{ "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區金沙江路2239號金沙和美廣場B1-10-6" },{ "value": "開心麗果（繽谷店）", "address": "上海市長寧區威寧路天山路341號" },{ "value": "超級雞車（豐莊路店）", "address": "上海市嘉定區豐莊路240號" },{ "value": "妙生活果園（北新涇店）", "address": "長寧區新漁路144號" },{ "value": "香宜度麻辣香鍋", "address": "長寧區淞虹路148號" },{ "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區老真北路160號" },{ "value": "港式小鋪", "address": "上海市長寧區金鐘路968號15樓15-105室" },{ "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },{ "value": "北京餃子館", "address": "長寧區北新涇街道天山西路490-1號" },{ "value": "飯典*新簡餐（凌空SOHO店）", "address": "上海市長寧區金鐘路968號9號樓地下一層9-83室" },{ "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號地下一層甲部" },{ "value": "動力雞車", "address": "長寧區仙霞西路299弄3號101B" },{ "value": "瀏陽蒸菜", "address": "天山西路430號" },{ "value": "四海游龍（天山西路店）", "address": "上海市長寧區天山西路" },{ "value": "櫻花食堂（凌空店）", "address": "上海市長寧區金鐘路968號15樓15-105室" },{ "value": "壹分米客家傳統調制米粉(天山店)", "address": "天山西路428號" },{ "value": "福榮祥燒臘（平溪路店）", "address": "上海市長寧區協和路福泉路255弄57-73號" },{ "value": "速記黃燜雞米飯", "address": "上海市長寧區北新涇街道金鐘路180號1層01號攤位" },{ "value": "紅辣椒麻辣燙", "address": "上海市長寧區天山西路492號" },{ "value": "(小楊生煎)西郊百聯餐廳", "address": "長寧區仙霞西路88號百聯2樓" },{ "value": "陽陽麻辣燙", "address": "天山西路389號" },{ "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區金沙江路1699號鑫樂惠美食廣場A13" }];},querySearchAsync(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;clearTimeout(this.timeout);this.timeout = setTimeout(() => {cb(results);}, 3000 * Math.random());},createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}};
</script>

輸入長度限制

<el-inputtype="text"placeholder="請輸入內容"v-model="text"maxlength="10"show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-inputtype="textarea"placeholder="請輸入內容"v-model="textarea"maxlength="30"show-word-limit
>
</el-input><script>
export default {data() {return {text: '',textarea: ''}}
}
</script>

InputNumber 計數器

基礎用法

<template><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>export default {data() {return {num: 1};},methods: {handleChange(value) {console.log(value);}}};
</script>

禁用狀態

<template><el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>export default {data() {return {num: 1}}};
</script>

步數

<template><el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>export default {data() {return {num: 5}}};
</script>

嚴格步數

<template><el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>export default {data() {return {num: 2}}};
</script>

精度

<template><el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>export default {data() {return {num: 1}}};
</script>

尺寸

<template><el-input-number v-model="num1"></el-input-number><el-input-number size="medium" v-model="num2"></el-input-number><el-input-number size="small" v-model="num3"></el-input-number><el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>export default {data() {return {num1: 1,num2: 1,num3: 1,num4: 1}}};
</script>

按鈕位置

<template><el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>export default {data() {return {num: 1};},methods: {handleChange(value) {console.log(value);}}};
</script>

Select 選擇器

基礎用法

<template><el-select v-model="value" placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶'}, {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍須面'}, {value: '選項5',label: '北京烤鴨'}],value: ''}}}
</script>

有禁用選項

<template><el-select v-model="value" placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value":disabled="item.disabled"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶',disabled: true}, {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍須面'}, {value: '選項5',label: '北京烤鴨'}],value: ''}}}
</script>

禁用狀態

<template><el-select v-model="value" disabled placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶'}, {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍須面'}, {value: '選項5',label: '北京烤鴨'}],value: ''}}}
</script>

可清空單選

<template><el-select v-model="value" clearable placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶'}, {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍須面'}, {value: '選項5',label: '北京烤鴨'}],value: ''}}}
</script>

自定義模板

<template><el-select v-model="value" placeholder="請選擇"><el-optionv-for="item in cities":key="item.value":label="item.label":value="item.value"><span style="float: left">{{ item.label }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span></el-option></el-select>
</template><script>export default {data() {return {cities: [{value: 'Beijing',label: '北京'}, {value: 'Shanghai',label: '上海'}, {value: 'Nanjing',label: '南京'}, {value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '廣州'}],value: ''}}}
</script>

分組

<template><el-select v-model="value" placeholder="請選擇"><el-option-groupv-for="group in options":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="item.label":value="item.value"></el-option></el-option-group></el-select>
</template><script>export default {data() {return {options: [{label: '熱門城市',options: [{value: 'Shanghai',label: '上海'}, {value: 'Beijing',label: '北京'}]}, {label: '城市名',options: [{value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '廣州'}, {value: 'Dalian',label: '大連'}]}],value: ''}}}
</script>

可搜索

<template><el-select v-model="value" filterable placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶'}, {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍須面'}, {value: '選項5',label: '北京烤鴨'}],value: ''}}}
</script>

遠程搜索

<template><el-selectv-model="value"multiplefilterableremotereserve-keywordplaceholder="請輸入關鍵詞":remote-method="remoteMethod":loading="loading"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [],value: [],list: [],loading: false,states: ["Alabama", "Alaska", "Arizona","Arkansas", "California", "Colorado","Connecticut", "Delaware", "Florida","Georgia", "Hawaii", "Idaho", "Illinois","Indiana", "Iowa", "Kansas", "Kentucky","Louisiana", "Maine", "Maryland","Massachusetts", "Michigan", "Minnesota","Mississippi", "Missouri", "Montana","Nebraska", "Nevada", "New Hampshire","New Jersey", "New Mexico", "New York","North Carolina", "North Dakota", "Ohio","Oklahoma", "Oregon", "Pennsylvania","Rhode Island", "South Carolina","South Dakota", "Tennessee", "Texas","Utah", "Vermont", "Virginia","Washington", "West Virginia", "Wisconsin","Wyoming"]}},mounted() {this.list = this.states.map(item => {return { value: item, label: item };});},methods: {remoteMethod(query) {if (query !== '') {this.loading = true;setTimeout(() => {this.loading = false;this.options = this.list.filter(item => {return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;});}, 200);} else {this.options = [];}}}}
</script>

創建條目

<template><el-selectv-model="value"multiplefilterableallow-createdefault-first-optionplaceholder="請選擇文章標簽"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: 'HTML',label: 'HTML'}, {value: 'CSS',label: 'CSS'}, {value: 'JavaScript',label: 'JavaScript'}],value: []}}}
</script>

Cascader 級聯選擇器

基礎用法

<div class="block"><span class="demonstration">默認 click 觸發子菜單</span><el-cascaderv-model="value":options="options"@change="handleChange"></el-cascader>
</div>
<div class="block"><span class="demonstration">hover 觸發子菜單</span><el-cascaderv-model="value":options="options":props="{ expandTrigger: 'hover' }"@change="handleChange"></el-cascader>
</div><script>export default {data() {return {value: [],options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]};},methods: {handleChange(value) {console.log(value);}}};
</script>

禁用選項

<el-cascader :options="options"></el-cascader><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',disabled: true,children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]};}};
</script>

可清空

<el-cascader :options="options" clearable></el-cascader><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}}}
</script>

僅顯示最后一級

<el-cascader :options="options" :show-all-levels="false"></el-cascader><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]};}};
</script>

標題

<div class="block"><span class="demonstration">默認顯示所有Tag</span><el-cascader:options="options":props="props"clearable></el-cascader>
</div>
<div class="block"><span class="demonstration">折疊展示Tag</span><el-cascader:options="options":props="props"collapse-tagsclearable></el-cascader>
</div><script>export default {data() {return {props: { multiple: true },options: [{value: 1,label: '東南',children: [{value: 2,label: '上海',children: [{ value: 3, label: '普陀' },{ value: 4, label: '黃埔' },{ value: 5, label: '徐匯' }]}, {value: 7,label: '江蘇',children: [{ value: 8, label: '南京' },{ value: 9, label: '蘇州' },{ value: 10, label: '無錫' }]}, {value: 12,label: '浙江',children: [{ value: 13, label: '杭州' },{ value: 14, label: '寧波' },{ value: 15, label: '嘉興' }]}]}, {value: 17,label: '西北',children: [{value: 18,label: '陜西',children: [{ value: 19, label: '西安' },{ value: 20, label: '延安' }]}, {value: 21,label: '新疆維吾爾族自治區',children: [{ value: 22, label: '烏魯木齊' },{ value: 23, label: '克拉瑪依' }]}]}]};}};
</script>

選擇任意一級選項

<div class="block"><span class="demonstration">單選選擇任意一級選項</span><el-cascader:options="options":props="{ checkStrictly: true }"clearable></el-cascader>
</div>
<div class="block"><span class="demonstration">多選選擇任意一級選項</span><el-cascader:options="options":props="{ multiple: true, checkStrictly: true }"clearable></el-cascader>
</div><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]};}};
</script>

動態加載

<el-cascader :props="props"></el-cascader><script>let id = 0;export default {data() {return {props: {lazy: true,lazyLoad (node, resolve) {const { level } = node;setTimeout(() => {const nodes = Array.from({ length: level + 1 }).map(item => ({value: ++id,label: `選項${id}`,leaf: level >= 2}));// 通過調用resolve將子節點數據返回，通知組件數據加載完成resolve(nodes);}, 1000);}}};}};
</script>

可搜索

<div class="block"><span class="demonstration">單選可搜索</span><el-cascaderplaceholder="試試搜索：指南":options="options"filterable></el-cascader>
</div>
<div class="block"><span class="demonstration">多選可搜索</span><el-cascaderplaceholder="試試搜索：指南":options="options":props="{ multiple: true }"filterable></el-cascader>
</div><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]};}};
</script>

自定義節點內容

<el-cascader :options="options"><template slot-scope="{ node, data }"><span>{{ data.label }}</span><span v-if="!node.isLeaf"> ({{ data.children.length }}) </span></template>
</el-cascader><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}}}
</script>

級聯面板

<el-cascader-panel :options="options"></el-cascader-panel><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]};}};
</script>

Switch 開關

基本用法

<el-switchv-model="value"active-color="#13ce66"inactive-color="#ff4949">
</el-switch><script>export default {data() {return {value: true}}};
</script>

文字描述

<el-switchv-model="value1"active-text="按月付費"inactive-text="按年付費">
</el-switch>
<el-switchstyle="display: block"v-model="value2"active-color="#13ce66"inactive-color="#ff4949"active-text="按月付費"inactive-text="按年付費">
</el-switch><script>export default {data() {return {value1: true,value2: true}}};
</script>

擴展的 value 類型

<el-tooltip :content="'Switch value: ' + value" placement="top"><el-switchv-model="value"active-color="#13ce66"inactive-color="#ff4949"active-value="100"inactive-value="0"></el-switch>
</el-tooltip><script>export default {data() {return {value: '100'}}};
</script>

禁用狀態

<el-switchv-model="value1"disabled>
</el-switch>
<el-switchv-model="value2"disabled>
</el-switch>
<script>export default {data() {return {value1: true,value2: false}}};
</script>

Slider 滑塊

基礎用法

<template><div class="block"><span class="demonstration">默認</span><el-slider v-model="value1"></el-slider></div><div class="block"><span class="demonstration">自定義初始值</span><el-slider v-model="value2"></el-slider></div><div class="block"><span class="demonstration">隱藏 Tooltip</span><el-slider v-model="value3" :show-tooltip="false"></el-slider></div><div class="block"><span class="demonstration">格式化 Tooltip</span><el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider></div><div class="block"><span class="demonstration">禁用</span><el-slider v-model="value5" disabled></el-slider></div>
</template><script>export default {data() {return {value1: 0,value2: 50,value3: 36,value4: 48,value5: 42}},methods: {formatTooltip(val) {return val / 100;}}}
</script>

離散值

<template><div class="block"><span class="demonstration">不顯示間斷點</span><el-sliderv-model="value1":step="10"></el-slider></div><div class="block"><span class="demonstration">顯示間斷點</span><el-sliderv-model="value2":step="10"show-stops></el-slider></div>
</template><script>export default {data() {return {value1: 0,value2: 0}}}
</script>

帶有輸入框

<template><div class="block"><el-sliderv-model="value"show-input></el-slider></div>
</template><script>export default {data() {return {value: 0}}}
</script>

范圍選擇

<template><div class="block"><el-sliderv-model="value"rangeshow-stops:max="10"></el-slider></div>
</template><script>export default {data() {return {value: [4, 8]}}}
</script>

豎向模式

<template><div class="block"><el-sliderv-model="value"verticalheight="200px"></el-slider></div>
</template><script>export default {data() {return {value: 37}}}
</script>

展示標記

<template><div class="block"><el-sliderv-model="value"range:marks="marks"></el-slider></div>
</template><script>export default {data() {return {value: [30, 60],marks: {0: '0°C',8: '8°C',37: '37°C',50: {style: {color: '#1989FA'},label: this.$createElement('strong', '50%')}}}}}
</script>

TimePicker 時間選擇器

固定時間點

<el-time-selectv-model="value":picker-options="{start: '08:30',step: '00:15',end: '18:30'}"placeholder="選擇時間">
</el-time-select><script>export default {data() {return {value: ''};}}
</script>

任意時間點

<template><el-time-pickerv-model="value1":picker-options="{selectableRange: '18:30:00 - 20:30:00'}"placeholder="任意時間點"></el-time-picker><el-time-pickerarrow-controlv-model="value2":picker-options="{selectableRange: '18:30:00 - 20:30:00'}"placeholder="任意時間點"></el-time-picker>
</template><script>export default {data() {return {value1: new Date(2016, 9, 10, 18, 40),value2: new Date(2016, 9, 10, 18, 40)};}}
</script>

固定時間范圍

<template><el-time-selectplaceholder="起始時間"v-model="startTime":picker-options="{start: '08:30',step: '00:15',end: '18:30'}"></el-time-select><el-time-selectplaceholder="結束時間"v-model="endTime":picker-options="{start: '08:30',step: '00:15',end: '18:30',minTime: startTime}"></el-time-select>
</template><script>export default {data() {return {startTime: '',endTime: ''};}}
</script>

任意時間范圍

<template><el-time-pickeris-rangev-model="value1"range-separator="至"start-placeholder="開始時間"end-placeholder="結束時間"placeholder="選擇時間范圍"></el-time-picker><el-time-pickeris-rangearrow-controlv-model="value2"range-separator="至"start-placeholder="開始時間"end-placeholder="結束時間"placeholder="選擇時間范圍"></el-time-picker>
</template><script>export default {data() {return {value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]};}}
</script>

DatePicker 日期選擇器

選擇日

<template><div class="block"><span class="demonstration">默認</span><el-date-pickerv-model="value1"type="date"placeholder="選擇日期"></el-date-picker></div><div class="block"><span class="demonstration">帶快捷選項</span><el-date-pickerv-model="value2"align="right"type="date"placeholder="選擇日期":picker-options="pickerOptions"></el-date-picker></div>
</template><script>export default {data() {return {pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},shortcuts: [{text: '今天',onClick(picker) {picker.$emit('pick', new Date());}}, {text: '昨天',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, {text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}}]},value1: '',value2: '',};}};
</script>

其他日期單位

<div class="container"><div class="block"><span class="demonstration">周</span><el-date-pickerv-model="value1"type="week"format="yyyy 第 WW 周"placeholder="選擇周"></el-date-picker></div><div class="block"><span class="demonstration">月</span><el-date-pickerv-model="value2"type="month"placeholder="選擇月"></el-date-picker></div>
</div>
<div class="container"><div class="block"><span class="demonstration">年</span><el-date-pickerv-model="value3"type="year"placeholder="選擇年"></el-date-picker></div><div class="block"><span class="demonstration">多個日期</span><el-date-pickertype="dates"v-model="value4"placeholder="選擇一個或多個日期"></el-date-picker></div>
</div><script>export default {data() {return {value1: '',value2: '',value3: '',value4: ''};}};
</script>

選擇日期范圍

<template><div class="block"><span class="demonstration">默認</span><el-date-pickerv-model="value1"type="daterange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></div><div class="block"><span class="demonstration">帶快捷選項</span><el-date-pickerv-model="value2"type="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="開始日期"end-placeholder="結束日期":picker-options="pickerOptions"></el-date-picker></div>
</template><script>export default {data() {return {pickerOptions: {shortcuts: [{text: '最近一周',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', [start, end]);}}, {text: '最近一個月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', [start, end]);}}, {text: '最近三個月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', [start, end]);}}]},value1: '',value2: ''};}};
</script>

選擇月份范圍

<template><div class="block"><span class="demonstration">默認</span><el-date-pickerv-model="value1"type="monthrange"range-separator="至"start-placeholder="開始月份"end-placeholder="結束月份"></el-date-picker></div><div class="block"><span class="demonstration">帶快捷選項</span><el-date-pickerv-model="value2"type="monthrange"align="right"unlink-panelsrange-separator="至"start-placeholder="開始月份"end-placeholder="結束月份":picker-options="pickerOptions"></el-date-picker></div>
</template><script>export default {data() {return {pickerOptions: {shortcuts: [{text: '本月',onClick(picker) {picker.$emit('pick', [new Date(), new Date()]);}}, {text: '今年至今',onClick(picker) {const end = new Date();const start = new Date(new Date().getFullYear(), 0);picker.$emit('pick', [start, end]);}}, {text: '最近六個月',onClick(picker) {const end = new Date();const start = new Date();start.setMonth(start.getMonth() - 6);picker.$emit('pick', [start, end]);}}]},value1: '',value2: ''};}};
</script>

日期格式

<template><div class="block"><span class="demonstration">默認為 Date 對象</span><div class="demonstration">值：{{ value1 }}</div><el-date-pickerv-model="value1"type="date"placeholder="選擇日期"format="yyyy 年 MM 月 dd 日"></el-date-picker></div><div class="block"><span class="demonstration">使用 value-format</span><div class="demonstration">值：{{ value2 }}</div><el-date-pickerv-model="value2"type="date"placeholder="選擇日期"format="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"></el-date-picker></div><div class="block"><span class="demonstration">時間戳</span><div class="demonstration">值：{{ value3 }}</div><el-date-pickerv-model="value3"type="date"placeholder="選擇日期"format="yyyy 年 MM 月 dd 日"value-format="timestamp"></el-date-picker></div>
</template><script>export default {data() {return {value1: '',value2: '',value3: ''};}};
</script>

默認顯示日期

<template><div class="block"><p>組件值：{{ value }}</p><el-date-pickerv-model="value"type="daterange"start-placeholder="開始日期"end-placeholder="結束日期":default-time="['00:00:00', '23:59:59']"></el-date-picker></div>
</template><script>export default {data() {return {value: ''};}};
</script>

DateTimePicker 日期時間選擇器

日期和時間點

<template><div class="block"><span class="demonstration">默認</span><el-date-pickerv-model="value1"type="datetime"placeholder="選擇日期時間"></el-date-picker></div><div class="block"><span class="demonstration">帶快捷選項</span><el-date-pickerv-model="value2"type="datetime"placeholder="選擇日期時間"align="right":picker-options="pickerOptions"></el-date-picker></div><div class="block"><span class="demonstration">設置默認時間</span><el-date-pickerv-model="value3"type="datetime"placeholder="選擇日期時間"default-time="12:00:00"></el-date-picker></div>
</template><script>export default {data() {return {pickerOptions: {shortcuts: [{text: '今天',onClick(picker) {picker.$emit('pick', new Date());}}, {text: '昨天',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, {text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}}]},value1: '',value2: '',value3: ''};}};
</script>

日期和時間范圍

<template><div class="block"><span class="demonstration">默認</span><el-date-pickerv-model="value1"type="datetimerange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></div><div class="block"><span class="demonstration">帶快捷選項</span><el-date-pickerv-model="value2"type="datetimerange":picker-options="pickerOptions"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"align="right"></el-date-picker></div>
</template><script>export default {data() {return {pickerOptions: {shortcuts: [{text: '最近一周',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', [start, end]);}}, {text: '最近一個月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', [start, end]);}}, {text: '最近三個月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', [start, end]);}}]},value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],value2: ''};}};
</script>

標題

<template><div class="block"><span class="demonstration">起始日期時刻為 12:00:00</span><el-date-pickerv-model="value1"type="datetimerange"start-placeholder="開始日期"end-placeholder="結束日期":default-time="['12:00:00']"></el-date-picker></div><div class="block"><span class="demonstration">起始日期時刻為 12:00:00，結束日期時刻為 08:00:00</span><el-date-pickerv-model="value2"type="datetimerange"align="right"start-placeholder="開始日期"end-placeholder="結束日期":default-time="['12:00:00', '08:00:00']"></el-date-picker></div>
</template><script>export default {data() {return {value1: '',value2: ''};}};
</script>

Upload 上傳

點擊上傳

<el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove"multiple:limit="3":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
<script>export default {data() {return {fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]};},methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);},handleExceed(files, fileList) {this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);},beforeRemove(file, fileList) {return this.$confirm(`確定移除 ${ file.name }？`);}}}
</script>

用戶頭像上傳

<el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload">![在這里插入圖片描述]()<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload><style>.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style><script>export default {data() {return {imageUrl: ''};},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上傳頭像圖片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上傳頭像圖片大小不能超過 2MB!');}return isJPG && isLt2M;}}}
</script>

照片墻

<el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove"><i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">![在這里插入圖片描述]()
</el-dialog>
<script>export default {data() {return {dialogImageUrl: '',dialogVisible: false};},methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;}}}
</script>

文件縮略圖

<el-uploadaction="#"list-type="picture-card":auto-upload="false"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{file}"><imgclass="el-upload-list__item-thumbnail":src="file.url" alt=""><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span><spanv-if="!disabled"class="el-upload-list__item-delete"@click="handleDownload(file)"><i class="el-icon-download"></i></span><spanv-if="!disabled"class="el-upload-list__item-delete"@click="handleRemove(file)"><i class="el-icon-delete"></i></span></span></div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">![在這里插入圖片描述]()
</el-dialog>
<script>export default {data() {return {dialogImageUrl: '',dialogVisible: false,disabled: false};},methods: {handleRemove(file) {console.log(file);},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},handleDownload(file) {console.log(file);}}}
</script>

標題

<el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList"list-type="picture"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
<script>export default {data() {return {fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]};},methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);}}}
</script>

上傳文件列表控制

<el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-change="handleChange":file-list="fileList"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
<script>export default {data() {return {fileList: [{name: 'food.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]};},methods: {handleChange(file, fileList) {this.fileList = fileList.slice(-3);}}}
</script>

拖拽上傳

<el-uploadclass="upload-demo"dragaction="https://jsonplaceholder.typicode.com/posts/"multiple><i class="el-icon-upload"></i><div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div><div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>

手動上傳

<el-uploadclass="upload-demo"ref="upload"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList":auto-upload="false"><el-button slot="trigger" size="small" type="primary">選取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
<script>export default {data() {return {fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]};},methods: {submitUpload() {this.$refs.upload.submit();},handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);}}}
</script>

Rate 評分

基礎用法

<div class="block"><span class="demonstration">默認不區分顏色</span><el-rate v-model="value1"></el-rate>
</div>
<div class="block"><span class="demonstration">區分顏色</span><el-ratev-model="value2":colors="colors"></el-rate>
</div><script>export default {data() {return {value1: null,value2: null,colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }}}}
</script>

輔助文字

<el-ratev-model="value"show-text>
</el-rate><script>export default {data() {return {value: null}}}
</script>

其它 icon

<el-ratev-model="value":icon-classes="iconClasses"void-icon-class="icon-rate-face-off":colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate><script>export default {data() {return {value: null,iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }}}}
</script>

只讀

<el-ratev-model="value"disabledshow-scoretext-color="#ff9900"score-template="{value}">
</el-rate><script>export default {data() {return {value: 3.7}}}
</script>

ColorPicker 顏色選擇器

基礎用法

<div class="block"><span class="demonstration">有默認值</span><el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block"><span class="demonstration">無默認值</span><el-color-picker v-model="color2"></el-color-picker>
</div><script>export default {data() {return {color1: '#409EFF',color2: null}}};
</script>

選擇透明度

<el-color-picker v-model="color" show-alpha></el-color-picker><script>export default {data() {return {color: 'rgba(19, 206, 102, 0.8)'}}};
</script>

預定義顏色

<el-color-pickerv-model="color"show-alpha:predefine="predefineColors">
</el-color-picker><script>export default {data() {return {color: 'rgba(255, 69, 0, 0.68)',predefineColors: ['#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)','hsv(51, 100, 98)','hsva(120, 40, 94, 0.5)','hsl(181, 100%, 37%)','hsla(209, 100%, 56%, 0.73)','#c7158577']}}};
</script>

不同尺寸

<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker><script>export default {data() {return {color: '#409EFF'}}};
</script>

Transfer 穿梭框

基礎用法

<template><el-transfer v-model="value" :data="data"></el-transfer>
</template><script>export default {data() {const generateData = _ => {const data = [];for (let i = 1; i <= 15; i++) {data.push({key: i,label: `備選項 ${ i }`,disabled: i % 4 === 0});}return data;};return {data: generateData(),value: [1, 4]};}};
</script>

可搜索

<template><el-transferfilterable:filter-method="filterMethod"filter-placeholder="請輸入城市拼音"v-model="value":data="data"></el-transfer>
</template><script>export default {data() {const generateData = _ => {const data = [];const cities = ['上海', '北京', '廣州', '深圳', '南京', '西安', '成都'];const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];cities.forEach((city, index) => {data.push({label: city,key: index,pinyin: pinyin[index]});});return data;};return {data: generateData(),value: [],filterMethod(query, item) {return item.pinyin.indexOf(query) > -1;}};}};
</script>

可自定義

<template><p style="text-align: center; margin: 0 0 20px">使用 render-content 自定義數據項</p><div style="text-align: center"><el-transferstyle="text-align: left; display: inline-block"v-model="value"filterable:left-default-checked="[2, 3]":right-default-checked="[1]":render-content="renderFunc":titles="['Source', 'Target']":button-texts="['到左邊', '到右邊']":format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"@change="handleChange":data="data"><el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button><el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button></el-transfer></div><p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定義數據項</p><div style="text-align: center"><el-transferstyle="text-align: left; display: inline-block"v-model="value4"filterable:left-default-checked="[2, 3]":right-default-checked="[1]":titles="['Source', 'Target']":button-texts="['到左邊', '到右邊']":format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"@change="handleChange":data="data"><span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span><el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button><el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button></el-transfer></div>
</template><style>.transfer-footer {margin-left: 20px;padding: 6px 5px;}
</style><script>export default {data() {const generateData = _ => {const data = [];for (let i = 1; i <= 15; i++) {data.push({key: i,label: `備選項 ${ i }`,disabled: i % 4 === 0});}return data;};return {data: generateData(),value: [1],value4: [1],renderFunc(h, option) {return <span>{ option.key } - { option.label }</span>;}};},methods: {handleChange(value, direction, movedKeys) {console.log(value, direction, movedKeys);}}};
</script>

數據項屬性別名

<template><el-transferv-model="value":props="{key: 'value',label: 'desc'}":data="data"></el-transfer>
</template><script>export default {data() {const generateData = _ => {const data = [];for (let i = 1; i <= 15; i++) {data.push({value: i,desc: `備選項 ${ i }`,disabled: i % 4 === 0});}return data;};return {data: generateData(),value: []};}};
</script>

Form 表單

典型表單

<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活動名稱"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活動區域"><el-select v-model="form.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間"><el-col :span="11"><el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即時配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活動性質"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="線下主題活動" name="type"></el-checkbox><el-checkbox label="單純品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊資源"><el-radio-group v-model="form.resource"><el-radio label="線上品牌商贊助"></el-radio><el-radio label="線下場地免費"></el-radio></el-radio-group></el-form-item><el-form-item label="活動形式"><el-input type="textarea" v-model="form.desc"></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>
<script>export default {data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},methods: {onSubmit() {console.log('submit!');}}}
</script>

行內表單

<el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="審批人"><el-input v-model="formInline.user" placeholder="審批人"></el-input></el-form-item><el-form-item label="活動區域"><el-select v-model="formInline.region" placeholder="活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item>
</el-form>
<script>export default {data() {return {formInline: {user: '',region: ''}}},methods: {onSubmit() {console.log('submit!');}}}
</script>

對齊方式

<el-radio-group v-model="labelPosition" size="small"><el-radio-button label="left">左對齊</el-radio-button><el-radio-button label="right">右對齊</el-radio-button><el-radio-button label="top">頂部對齊</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"><el-form-item label="名稱"><el-input v-model="formLabelAlign.name"></el-input></el-form-item><el-form-item label="活動區域"><el-input v-model="formLabelAlign.region"></el-input></el-form-item><el-form-item label="活動形式"><el-input v-model="formLabelAlign.type"></el-input></el-form-item>
</el-form>
<script>export default {data() {return {labelPosition: 'left',formLabelAlign: {name: '',region: '',type: ''}};}}
</script>

表單驗證

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活動名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活動區域" prop="region"><el-select v-model="ruleForm.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即時配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活動性質" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="線下主題活動" name="type"></el-checkbox><el-checkbox label="單純品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊資源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="線上品牌商贊助"></el-radio><el-radio label="線下場地免費"></el-radio></el-radio-group></el-form-item><el-form-item label="活動形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }],region: [{ required: true, message: '請選擇活動區域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '請選擇日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '請選擇時間', trigger: 'change' }],type: [{ type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }],resource: [{ required: true, message: '請選擇活動資源', trigger: 'change' }],desc: [{ required: true, message: '請填寫活動形式', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

自定義校驗規則

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="密碼" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="確認密碼" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年齡不能為空'));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('請輸入數字值'));} else {if (value < 18) {callback(new Error('必須年滿18歲'));} else {callback();}}}, 1000);};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('請輸入密碼'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('請再次輸入密碼'));} else if (value !== this.ruleForm.pass) {callback(new Error('兩次輸入密碼不一致!'));} else {callback();}};return {ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

動態增減表單項

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"><el-form-itemprop="email"label="郵箱":rules="[{ required: true, message: '請輸入郵箱地址', trigger: 'blur' },{ type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }]"><el-input v-model="dynamicValidateForm.email"></el-input></el-form-item><el-form-itemv-for="(domain, index) in dynamicValidateForm.domains":label="'域名' + index":key="domain.key":prop="'domains.' + index + '.value'":rules="{required: true, message: '域名不能為空', trigger: 'blur'}"><el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">刪除</el-button></el-form-item><el-form-item><el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button><el-button @click="addDomain">新增域名</el-button><el-button @click="resetForm('dynamicValidateForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {dynamicValidateForm: {domains: [{value: ''}],email: ''}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},removeDomain(item) {var index = this.dynamicValidateForm.domains.indexOf(item)if (index !== -1) {this.dynamicValidateForm.domains.splice(index, 1)}},addDomain() {this.dynamicValidateForm.domains.push({value: '',key: Date.now()});}}}
</script>

數字類型驗證

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"><el-form-itemlabel="年齡"prop="age":rules="[{ required: true, message: '年齡不能為空'},{ type: 'number', message: '年齡必須為數字值'}]"><el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button><el-button @click="resetForm('numberValidateForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {numberValidateForm: {age: ''}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

表單內組件尺寸控制

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini"><el-form-item label="活動名稱"><el-input v-model="sizeForm.name"></el-input></el-form-item><el-form-item label="活動區域"><el-select v-model="sizeForm.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間"><el-col :span="11"><el-date-picker type="date" placeholder="選擇日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="選擇時間" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="活動性質"><el-checkbox-group v-model="sizeForm.type"><el-checkbox-button label="美食/餐廳線上活動" name="type"></el-checkbox-button><el-checkbox-button label="地推活動" name="type"></el-checkbox-button><el-checkbox-button label="線下主題活動" name="type"></el-checkbox-button></el-checkbox-group></el-form-item><el-form-item label="特殊資源"><el-radio-group v-model="sizeForm.resource" size="medium"><el-radio border label="線上品牌商贊助"></el-radio><el-radio border label="線下場地免費"></el-radio></el-radio-group></el-form-item><el-form-item size="large"><el-button type="primary" @click="onSubmit">立即創建</el-button><el-button>取消</el-button></el-form-item>
</el-form><script>export default {data() {return {sizeForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}};},methods: {onSubmit() {console.log('submit!');}}};
</script>

總結

以上是生活随笔為你收集整理的Element-UI组件之表单Form的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。