form

Radio 单选框

单选框/单选框组

按钮样式的单选组合。

带有边框单选

form_第1张图片

 

 form_第2张图片

 Checkbox 多选框

单独使用可以表示两种状态之间的切换

多选框组

全选的效果indeterminate

可选项目数量的限制---使用 min 和 max 属性能够限制可以被勾选的项目的数量

按钮样式

带有边框

form_第3张图片

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 设置其中一个子部分

可清空

仅显示最后一级---而不是选中项所在的完整路径

多选

自定义节点内容--- ({{ data.children.length }})

Switch 开关---succeed成功白色不成功

禁用状态

Slider 滑块

自定义初始值

通过输入框设置精确数值

支持选择某一数值范围

竖向模式

设置vertical可使 Slider 变成竖向模式,此时必须设置高度height属性

设置 marks 属性可以展示标记---对某一点的描述

TimePicker 时间选择器

可以选择任意时间

可选择任意的时间范围

 DatePicker 日期选择器

选择日

选择日期范围

带快捷选项

显示日期

使用 value-format显示

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

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

确定与清空与取消

默认的起始与结束时刻

 

你可能感兴趣的:(form)