Radio 单选框
单选框/单选框组
按钮样式的单选组合。
带有边框单选
Checkbox 多选框
单独使用可以表示两种状态之间的切换
多选框组
全选的效果indeterminate
可选项目数量的限制---使用 min
和 max
属性能够限制可以被勾选的项目的数量
按钮样式
带有边框
Input 输入框
Input 为受控组件,它总会显示 Vue 绑定值。
更新组件的绑定值(或使用v-model)
可清空
密码框(有大眼)
带 icon图标 的输入框
可以通过 prefix-icon
和 suffix-icon
属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标
文本域---用于输入多行文本信息,通过将 type
属性的值指定为 textarea。
可自适应文本高度的文本域
通过设置 autosize
属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize
还可以设定为一个对象,指定最小行数和最大行数。
:autosize="{ minRows: 2, maxRows: 4}"
可前置或后置元素复合型输入框
前置和后置·一般为标签或按钮
¶尺寸size提供了 large、small 和 mini 三种尺寸
带输入建议---根据输入内容提供对应的输入建议
激活即列出输入建议---输入后匹配输入建议
自定义模板---可自定义输入建议的显示
输入内容长度限制
maxlength
和 minlength---
show-word-limit
inputNumber 计数器
精度
尺寸---提供了 medium
、small
、mini
三种尺寸的数字输入框
按钮位置
Select 选择器---下拉菜单
可清空单选
基础多选
自定义模板---将自定义的 HTML 模板插入el-option
的 slot 中即可。
分组 ---备选项进行分组展示
远程搜索 ---从服务器搜索数据,输入关键字进行查找
创建条目 ---可以创建并选中选项中不存在的条目
Cascader 级联选择器
级联侧边栏有两种触发子菜单的方式click和hover
其中可用disabled
设置其中一个子部分
可清空
仅显示最后一级---而不是选中项所在的完整路径
多选
自定义节点内容---<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
Switch 开关---succeed成功白色不成功
禁用状态
Slider 滑块
自定义初始值
通过输入框设置精确数值
支持选择某一数值范围
竖向模式
设置vertical
可使 Slider 变成竖向模式,此时必须设置高度height
属性
<el-slider v-model="value" vertical height="200px"> </el-slider>
设置 marks
属性可以展示标记---对某一点的描述
TimePicker 时间选择器
可以选择任意时间
可选择任意的时间范围
DatePicker 日期选择器
选择日
选择日期范围
带快捷选项
显示日期
使用 value-format显示
显示日期和时间点一起出现---
日期和时间范围一起出现-此刻设计
确定与清空与取消
默认的起始与结束时刻