ElementPlus 教程

TimePicker 时间选择器 用于选择或输入日期 任意时间点 可以选择任意时间 使用 el-time-picker 标签，通过 disabledHours …

DatePicker 日期选择器 用于选择或输入日期 选择日 以「日」为基本单位，基础的日期选择控件 基本单位由type属性指定。通过shortcuts配置快捷选项，禁用日期通过&…

在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 DatePicker 和 TimePick…

Upload 上传 通过点击或者拖拽上传文件 点击上传 只能上传 jpg/png 文件，且不超过 500kb food.jpeg food2.jpeg 通过 slot 你可以传入自…

评分组件 基础用法 默认不区分颜色 区分颜色 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用colors属性设置，…

Transfer 穿梭框 基础用法 Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一…

Form 表单 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据组件升级采用了 flex 布局，以替代旧版本的 float 布局。 典型表单 包括各种表单项，比…

Table 表格 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 基础表格 基础的表格展示用法。 当 el-table 元素中注入&…

Tag 标签 用于标记和选择。 基础用法 由type属性来选择 tag 的类型，也可以通过color属性来自定义背景色。 <template> <el-tag&g…

Tree 树形控件 用清晰的层级结构展示信息，可展开或折叠。 基础用法 基础的树形结构展示。 <template> <el-tree :data=”data” :…

Pagination 分页 当数据量过多时，使用分页分解数据。 基础用法 页数较少时的效果 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页…

Badge 标记 出现在按钮、图标旁的数字或状态标记。     基础用法 展示新消息数量。 定义value属性，它接受Number或者String。 …

Avatar 头像 用图标、图片或者字符的形式展示用户或事物信息。 基本用法 通过 shape 和 size 设置头像的形状和大小。 &lt…

Empty 空状态 空状态时的占位提示。 基础用法 <template> <el-empty description=”描述文字”></el-empt…

Descriptions 描述列表 列表形式展示多个字段。 基础用法 <template> <el-descriptions title=”用户信息”> &…

Result 结果 用于对用户的操作结果或者异常状态做反馈。 基础用法 <template> <el-row> <el-col :sm=”12″ :l…

Alert 警告 用于页面中展示重要的提示信息。 基本用法 页面中的非浮层元素，不会自动消失。 Alert 组件提供四种主题，由type属性指定，默认值为info。 <tem…

Message 消息提示 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 基础用法 从顶部出现，3 秒后自动消失。 Messa…

MessageBox 弹框 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。 从场景上说，MessageBox 的作用是美化系统自带的 …

Notification 通知 悬浮出现在页面角落，显示全局的通知提醒消息。 基本用法 适用性广泛的通知栏 Notification 组件提供通知功能，Element Plus 注…