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 作为它的唯一性标识