Element-UI组件之表单Form
Element-UI组件之表单Form
- Radio 单选框
- 基础用法
- 禁用状态
- 单选框组
- 按钮样式
- 带有边框
- Checkbox 多选框
- 基础用法
- 禁用状态
- 多选框组
- indeterminate 状态
- 可选项目数量的限制
- 按钮样式
- 带有边框
- Input 输入框
- 基础用法
- 禁用状态
- 可清空
- 密码框
- 带 icon 的输入框
- 文本域
- 可自适应文本高度的文本域
- 复合型输入框
- 尺寸
- 带输入建议
- 自定义模板
- 远程搜索
- 输入长度限制
- InputNumber 计数器
- 基础用法
- 禁用状态
- 步数
- 严格步数
- 精度
- 尺寸
- 按钮位置
- Select 选择器
- 基础用法
- 有禁用选项
- 禁用状态
- 可清空单选
- 自定义模板
- 分组
- 可搜索
- 远程搜索
- 创建条目
- Cascader 级联选择器
- 基础用法
- 禁用选项
- 可清空
- 仅显示最后一级
- 标题
- 选择任意一级选项
- 动态加载
- 可搜索
- 自定义节点内容
- 级联面板
- Switch 开关
- 基本用法
- 文字描述
- 扩展的 value 类型
- 禁用状态
- Slider 滑块
- 基础用法
- 离散值
- 带有输入框
- 范围选择
- 竖向模式
- 展示标记
- TimePicker 时间选择器
- 固定时间点
- 任意时间点
- 固定时间范围
- 任意时间范围
- DatePicker 日期选择器
- 选择日
- 其他日期单位
- 选择日期范围
- 选择月份范围
- 日期格式
- 默认显示日期
- DateTimePicker 日期时间选择器
- 日期和时间点
- 日期和时间范围
- 标题
- Upload 上传
- 点击上传
- 用户头像上传
- 照片墙
- 文件缩略图
- 标题
- 上传文件列表控制
- 拖拽上传
- 手动上传
- Rate 评分
- 基础用法
- 辅助文字
- 其它 icon
- 只读
- ColorPicker 颜色选择器
- 基础用法
- 选择透明度
- 预定义颜色
- 不同尺寸
- Transfer 穿梭框
- 基础用法
- 可搜索
- 可自定义
- 数据项属性别名
- Form 表单
- 典型表单
- 行内表单
- 对齐方式
- 表单验证
- 自定义校验规则
- 动态增减表单项
- 数字类型验证
- 表单内组件尺寸控制
Radio 单选框
基础用法
备选项
备选项
禁用状态
备选项
备选项
单选框组
备选项
备选项
备选项
按钮样式
带有边框
备选项1
备选项2
备选项1
备选项2
备选项1
备选项2
备选项1
备选项2
Checkbox 多选框
基础用法
备选项
禁用状态
备选项1
备选项
多选框组
indeterminate 状态
全选
{{city}}
可选项目数量的限制
{{city}}
按钮样式
{{city}}
{{city}}
{{city}}
{{city}}
带有边框
Input 输入框
基础用法
禁用状态
可清空
密码框
带 icon 的输入框
属性方式：
slot 方式：
文本域
可自适应文本高度的文本域
复合型输入框
Http://
.com
尺寸
带输入建议
激活即列出输入建议
输入后匹配输入建议
自定义模板
{{ item.value }}
{{ item.address }}
远程搜索
输入长度限制
InputNumber 计数器
基础用法
禁用状态
步数
严格步数
精度
尺寸
按钮位置
Select 选择器
基础用法
有禁用选项
禁用状态
可清空单选
自定义模板
{{ item.label }}
{{ item.value }}
分组
可搜索
远程搜索
创建条目
Cascader 级联选择器
基础用法
默认 click 触发子菜单
禁用选项
可清空
仅显示最后一级
标题
默认显示所有Tag
选择任意一级选项
单选选择任意一级选项
动态加载
可搜索
单选可搜索
自定义节点内容
{{ data.label }}
({{ data.children.length }})
级联面板
Switch 开关
基本用法
文字描述
扩展的 value 类型
禁用状态
Slider 滑块
基础用法
默认
离散值
不显示间断点
显示间断点
带有输入框
范围选择
竖向模式
展示标记
TimePicker 时间选择器
固定时间点
任意时间点
固定时间范围
任意时间范围
DatePicker 日期选择器
选择日
默认
带快捷选项
其他日期单位
周
月
年
多个日期
选择日期范围
默认
带快捷选项
选择月份范围
默认
带快捷选项
日期格式
默认为 Date 对象
值：{{ value1 }}
使用 value-format
值：{{ value2 }}
时间戳
值：{{ value3 }}
默认显示日期
组件值：{{ value }}
DateTimePicker 日期时间选择器
日期和时间点
默认
带快捷选项
设置默认时间
日期和时间范围
默认
带快捷选项
标题
起始日期时刻为 12:00:00
起始日期时刻为 12:00:00，结束日期时刻为 08:00:00
Upload 上传
点击上传
点击上传
只能上传jpg/png文件，且不超过500kb
用户头像上传
![在这里插入图片描述]()
照片墙
![在这里插入图片描述]()
文件缩略图
![]()
![在这里插入图片描述]()
标题
点击上传
只能上传jpg/png文件，且不超过500kb
上传文件列表控制
点击上传
只能上传jpg/png文件，且不超过500kb
拖拽上传
将文件拖到此处，或点击上传
只能上传jpg/png文件，且不超过500kb
手动上传
选取文件
上传到服务器
只能上传jpg/png文件，且不超过500kb
Rate 评分
基础用法
默认不区分颜色
辅助文字
其它 icon
只读
ColorPicker 颜色选择器
基础用法
有默认值
选择透明度
预定义颜色
不同尺寸
Transfer 穿梭框
基础用法
可搜索
可自定义
使用 render-content 自定义数据项
操作
操作
使用 scoped-slot 自定义数据项
{{ option.key }} - {{ option.label }}
操作
操作
数据项属性别名
Form 表单
典型表单
-
立即创建
取消
行内表单
查询
对齐方式
左对齐
右对齐
顶部对齐
表单验证
-
立即创建
重置
自定义校验规则
提交
重置
动态增减表单项
删除
提交
新增域名
重置
数字类型验证
提交
重置
表单内组件尺寸控制
-
立即创建
取消