Element-ui学习笔记3--Form表单(三)

时间:2019-06-13
本文章向大家介绍Element-ui学习笔记3--Form表单(三),主要包括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 属性可以控制数值精度,接收一个 Numberprecision 的值必须是一个非负整数,并且不能小于 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,它会在输入值发生变化时调用,参数为当前输入值。

为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-methodremote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果el-option是通过v-for指令渲染出来的,此时需要为el-option添加key属性,且其值需具有唯一性,比如此例中的item.value

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性,在该属性打开的情况下,按下回车就可以选中当前选项列表中的第一个选项,无需使用鼠标或键盘方向键进行定位。
如果 Select 的绑定值为对象类型,请务必指定 value-key 作为它的唯一性标识

原文地址:https://www.cnblogs.com/riko/p/11015087.html