form

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 计数器

精度

尺寸---提供了 mediumsmallmini 三种尺寸的数字输入框

按钮位置

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

显示日期和时间点一起出现---

日期和时间范围一起出现-此刻设计

确定与清空与取消

默认的起始与结束时刻

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值