Element-ui學習筆記3--Form表單（三）

InputNumber

<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

:step可以控制步長

step-strictly設置為true,規定了鍵入值必須是步數的倍數

設置 precision 屬性可以控制數值精度，接收一個 Number。precision 的值必須是一個非負整數，並且不能小於 step 的小數位數。

controls-position控制按鈕位置，可用值right

 

Select框

<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>

v-model的值為當前被選中的el-option的 value 屬性值

給el-option :disabled="item.disabled"

可以設置某個選項是否禁用

給el-select 的disabled將禁用整個選擇框

    clearable可清空選項

el-select設置multiple屬性即可啟用多選，此時v-model的值為當前選中值所組成的數組。默認情況下選中值會以 Tag 的形式展現，你也可以設置collapse-tags屬性將它們合並為一段文字。<el-select v-model="value1" multiple placeholder="請選擇  <el-option    v-for="item in options"    :key="item.value"

    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<template>
 <el-select v-model="value" placeholder="請選擇"> 
　　<el-option v-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>

可以在el-option的slot中插入自定義模板

<template>
　　<el-select v-model="value" placeholder="請選擇">
　　　　<el-option-group v-for="group in options" :key="group.label" :label="group.label">
　　　　　　<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
　　　　　　</el-option>
　　　　</el-option-group>
　　</el-select>
</template>
使用el-option-group對備選項進行分組，它的label屬性為分組名

為el-select添加filterable屬性即可啟用搜索功能。默認情況下，Select 會找出所有label屬性包含輸入值的選項。如果希望使用其他的搜索邏輯，可以通過傳入一個filter-method來實現。filter-method為一個Function，它會在輸入值發生變化時調用，參數為當前輸入值。

為了啟用遠程搜索，需要將filterable和remote設置為true，同時傳入一個remote-method。remote-method為一個Function，它會在輸入值發生變化時調用，參數為當前輸入值。需要注意的是，如果el-option是通過v-for指令渲染出來的，此時需要為el-option添加key屬性，且其值需具有唯一性，比如此例中的item.value。

使用allow-create屬性即可通過在輸入框中輸入文字來創建新的條目。注意此時filterable必須為真。本例還使用了default-first-option屬性，在該屬性打開的情況下，按下回車就可以選中當前選項列表中的第一個選項，無需使用鼠標或鍵盤方向鍵進行定位。
如果 Select 的綁定值為對象類型，請務必指定 value-key 作為它的唯一性標識