摘要：
基础用法 Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。 设置索引ref，在按钮中，我们注册了自定义指令v-popover，指向索引ID。trigger属性用于设置何时触发 Popo 阅读全文
摘要：
常用于展示鼠标 hover 时的提示信息。 基础用法 在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。 使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、lef 阅读全文
摘要：
在保留当前页面状态的情况下，告知用户并承载相关操作。 基本用法 Dialog 弹出一个对话框，适合需要定制性更大的场景。 需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slo 阅读全文
摘要：
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。 基础用法 简单的步骤条。 设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Boolean，单位为px，如果不设置，则为自适应。 阅读全文
摘要：
将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上，展开更多操作。 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。 1 <el-dropdown> 2 <span class= 阅读全文
摘要：
显示当前页面的路径，快速返回之前的任意页面。 基础用法 适用广泛的基础用法。 在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性，在el-breadcrumb标签中设置它来决定分隔符，它只能是字符串，默认 阅读全文
摘要：
分隔内容上有关联但属于不同类别的数据集合。 基础用法 基础的、简洁的标签页。 Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。 1 <template> 2 <el-tabs v-model="activeName" @tab-click= 阅读全文
摘要：
顶栏 适用广泛的基础用法。 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜 阅读全文
摘要：
悬浮出现在页面角落，显示全局的通知提醒消息。 基本用法 适用性广泛的通知栏 Notification 组件提供通知功能，Element 注册了$notify方法，接收一个options字面量参数，在最简单的情况下，你可以设置title字段和message字段，用于设置通知的标题和正文。默认情况下，经 阅读全文
摘要：
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。 从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。 消息提示 当用户进行操作时会被触 阅读全文
摘要：
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 基础用法 从顶部出现，3 秒后自动消失。 Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Noti 阅读全文
摘要：
加载数据时显示动效。 区域加载 在表格等容器中加载数据时显示。 Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DO 阅读全文
摘要：
基本用法 页面中的非浮层元素，不会自动消失。 Alert 组件提供四种主题，由type属性指定，默认值为info。 1 <template> 2 <el-alert 3 title="成功提示的文案" 4 type="success"> 5 </el-alert> 6 <el-alert 7 tit 阅读全文
摘要：
出现在按钮、图标旁的数字或状态标记。 基础用法 展示新消息数量。 定义value属性，它接受Number或者String。 1 <el-badge :value="12" class="item"> 2 <el-button size="small">评论</el-button> 3 </el-ba 阅读全文
摘要：
当数据量过多时，使用分页分解数据。 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total 阅读全文
摘要：
用清晰的层级结构展示信息，可展开或折叠。 基础用法 基础的树形结构展示。 1 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 2 3 <script> 4 export defa 阅读全文
摘要：
用于展示操作进度，告知用户当前状态和预期。 线形进度条 — 百分比外显 Progress 组件设置percentage属性即可，表示进度条对应的百分比，必填，必须在 0-100。 1 <el-progress :percentage="0"></el-progress> 2 <el-progress 阅读全文
摘要：
用于标记和选择。 基础用法 由type属性来选择tag的类型，也可以通过color属性来自定义背景色。 1 <el-tag>标签一</el-tag> 2 <el-tag type="success">标签二</el-tag> 3 <el-tag type="info">标签三</el-tag> 4 阅读全文