Input輸入框
Input 為受控組件，它總會顯示 Vue 綁定值。
通常情況下，應當處理 input 事件，並更新組件的綁定值（或使用v-model）。否則，輸入框內顯示的值將不會改變。
不支持 v-model 修飾符。
支持disabled
clearable（一鍵清空，默認false）
show-password（隱藏顯示的密碼輸入框）
<el-input placeholder="請輸入密碼" v-model="input" show-password>
</el-input>
<script>
export default { data() { return { input: '' } } }
</script>
使用icon
prefix-icon 首部添加icon
suffix-icon 尾部添加icon
<div class="demo-input-suffix">
屬性方式： <el-input placeholder="請選擇日期" suffix-icon="el-icon-date" v-model="input1"> </el-input>
<el-input placeholder="請輸入內容" prefix-icon="el-icon-search" v-model="input2"> </el-input>
</div>
可以用slot進行處理
<div class="demo-input-suffix">
slot 方式： <el-input placeholder="請選擇日期" v-model="input3"> <i slot="suffix" class="el-input__icon el-icon-date"></i> </el-input>
<el-input placeholder="請輸入內容" v-model="input4"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
</div>
type=‘textarea’，input文本域
可以用rows屬性控制文本域高度
通過設置 autosize 屬性可以使得文本域的高度能夠根據文本內容自動進行調整，並且 autosize 還可以設定為一個對象，指定最小行數和最大行數。
autosize,:autosize="{ minRows: 2, maxRows: 4}"
復合型輸入框
<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>
可通過 size 屬性指定輸入框的尺寸，除了默認的大小外，還提供了 large、small 和 mini 三種尺寸。
autocomplete 是一個可帶輸入建議的輸入框組件，fetch-suggestions 是一個返回輸入建議的方法屬性，如 querySearch(queryString, cb)，在該方法中你可以在你的輸入建議數據准備好時通過 cb(data) 返回到 autocomplete 組件中。
<el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="請輸入內容" @select="handleSelect" ></el-autocomplete>
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); }; },
補充一下
filter方法，這里這么寫是為了把queryString(input框的輸入值)傳參到內嵌的箭頭函數去使用，filter函數的參數，前三個默認是調用元素，索引，對應的數組對象，沒辦法直接傳參進該函數。
上面的箭頭函數可以簡寫成
return restaurant =>
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="請輸入內容" @select="handleSelect">
<i class="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>
使用slot可以自定義建議輸出模板，scope的參數為item
this.timeout = setTimeout(() => { cb(results); }, 3000 * Math.random());
模擬延遲查詢數據的效果
placement設置菜單彈出位置，可選項top,top-start,top-end,bottom,bottom-start,bottom-end
select-when-unmatched 在輸入沒有任何匹配建議的情況下，按下回車是否觸發 select事件 默認false
maxlength 和 minlength 是原生屬性，用來限制輸入框的字符長度，其中字符長度是用 Javascript 的字符串長度統計的。對於類型為 text 或 textarea 的輸入框，在使用 maxlength 屬性限制最大輸入長度的同時，可通過設置 show-word-limit 屬性來展示字數統計。
<el-input type="text" placeholder="請輸入內容" v-model="text" maxlength="10" show-word-limit >
參考地址：https://element.eleme.cn/#/zh-CN/component/input