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
作为它的唯一性标识
原文地址:https://www.cnblogs.com/riko/p/11015087.html
- Python爬虫(十五)_案例:使用bs4的爬虫
- Python爬虫(十六)_JSON模块与JsonPath
- 多类好米齐交易:域名776.cn近10万元结拍
- Python爬虫(八)_Requests的使用
- Python爬虫(十一)_案例:使用正则表达式的爬虫
- Python爬虫(十二)_XPath与lxml类库
- 区块链域名热度不减 健康类英文米近六位交易
- Python爬虫(九)_非结构化数据与结构化数据
- Python爬虫(十)_正则表达式
- python爬虫(四)_urllib2库的基本使用
- 投资人榴莲又卖出一枚三拼域名
- python爬虫(五)_urllib2:Get请求和Post请求
- python爬虫(七)_urllib2:urlerror和httperror
- 双拼市场好!米友售出域名chuijia.com
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python第七十课——python2与python3的一些区别
- Linux运维必会的100道MySql面试题之(一)
- Linux运维必会的100道MySql面试题之(二)
- Apache服务的反向代理及负载均衡配置
- Linux系统集群架构线上项目配置实战(二)
- Linux系统集群架构线上项目配置实战(三)
- Linux系统集群架构线上项目配置实战(四)
- Linux系统集群架构线上项目配置实战 五(完结篇)
- 生产Mysql数据库数据恢复实战过程
- voliate工作实际应用场景
- Linux三剑客命令之Awk
- 面试2万月薪必会知识:AQS
- MyBatis XML详解
- Linux三剑客命令之Sed
- Linux运维必会的100道MySql面试题之(四)