将动作或菜单折叠到下拉菜单中。
移动到下拉菜单上，展开更多操作。
通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。
<el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item disabled>双皮奶</el-dropdown-item> <el-dropdown-item divided>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } </style>可使用按钮触发下拉菜单。
设置split-button属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可。
<el-dropdown> <el-button type="primary"> 更多菜单<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item>双皮奶</el-dropdown-item> <el-dropdown-item>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <el-dropdown split-button type="primary" @click="handleClick"> 更多菜单 <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item>双皮奶</el-dropdown-item> <el-dropdown-item>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <style> .el-dropdown { vertical-align: top; } .el-dropdown + .el-dropdown { margin-left: 15px; } .el-icon-arrow-down { font-size: 12px; } </style> <script> export default { methods: { handleClick() { alert('button click'); } } } </script>可以配置 click 激活或者 hover 激活。
在trigger属性设置为click即可。
<el-row class="block-col-2"> <el-col :span="12"> <span class="demonstration">hover 激活</span> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item> <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item> <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item> <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item> <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> <el-col :span="12"> <span class="demonstration">click 激活</span> <el-dropdown trigger="click"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item> <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item> <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item> <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item> <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> </el-row> <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } .demonstration { display: block; color: #8492a6; font-size: 14px; margin-bottom: 20px; } </style>可以hide-on-click属性来配置。
下拉菜单默认在点击菜单项后会被隐藏，将hide-on-click属性默认为false可以关闭此功能。
<el-dropdown :hide-on-click="false"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item disabled>双皮奶</el-dropdown-item> <el-dropdown-item divided>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } </style>点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
<el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="a">黄金糕</el-dropdown-item> <el-dropdown-item command="b">狮子头</el-dropdown-item> <el-dropdown-item command="c">螺蛳粉</el-dropdown-item> <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item> <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } </style> <script> export default { methods: { handleCommand(command) { this.$message('click on item ' + command); } } } </script>Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
额外的尺寸：medium、small、mini，通过设置size属性来配置它们。
<el-dropdown split-button type="primary"> 默认尺寸 <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item>双皮奶</el-dropdown-item> <el-dropdown-item>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <el-dropdown size="medium" split-button type="primary"> 中等尺寸 <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item>双皮奶</el-dropdown-item> <el-dropdown-item>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <el-dropdown size="small" split-button type="primary"> 小型尺寸 <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item>双皮奶</el-dropdown-item> <el-dropdown-item>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <el-dropdown size="mini" split-button type="primary"> 超小尺寸 <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item>双皮奶</el-dropdown-item> <el-dropdown-item>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown>引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
简单的步骤条。
设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Number，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。
<el-steps :active="active" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3"></el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">下一步</el-button> <script> export default { data() { return { active: 0 }; }, methods: { next() { if (this.active++ > 2) this.active = 0; } } } </script>每一步骤显示出该步骤的状态。
也可以使用title具名分发，可以用slot的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
<el-steps :space="200" :active="1" finish-status="success"> <el-step title="已完成"></el-step> <el-step title="进行中"></el-step> <el-step title="步骤 3"></el-step> </el-steps>每个步骤有其对应的步骤状态描述。
<el-steps :active="1"> <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤 3" description="这段就没那么长了"></el-step> </el-steps>标题和描述都将居中。
<el-steps :active="2" align-center> <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step> </el-steps>步骤条内可以启用各种自定义的图标。
通过icon属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名slot来使用自定义的图标。
<el-steps :active="1"> <el-step title="步骤 1" icon="el-icon-edit"></el-step> <el-step title="步骤 2" icon="el-icon-upload"></el-step> <el-step title="步骤 3" icon="el-icon-picture"></el-step> </el-steps>竖直方向的步骤条。
只需要在el-steps元素中设置direction属性为vertical即可。
<div style="height: 300px;"> <el-steps direction="vertical" :active="1"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step> </el-steps> </div>设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。
<el-steps :active="1" simple> <el-step title="步骤 1" icon="el-icon-edit"></el-step> <el-step title="步骤 2" icon="el-icon-upload"></el-step> <el-step title="步骤 3" icon="el-icon-picture"></el-step> </el-steps> <el-steps :active="1" finish-status="success" simple style="margin-top: 20px"> <el-step title="步骤 1" ></el-step> <el-step title="步骤 2" ></el-step> <el-step title="步骤 3" ></el-step> </el-steps>在保留当前页面状态的情况下，告知用户并承载相关操作。
Dialog 弹出一个对话框，适合需要定制性更大的场景。
需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> <script> export default { data() { return { dialogVisible: false }; }, methods: { handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); } } }; </script>before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
<!-- Table --> <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-dialog> <!-- Form --> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogFormVisible"> <el-form :model="form"> <el-form-item label="活动名称" :label-width="formLabelWidth"> <el-input v-model="form.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="活动区域" :label-width="formLabelWidth"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </div> </el-dialog> <script> export default { data() { return { gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, dialogFormVisible: false, form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, formLabelWidth: '120px' }; } }; </script>如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
<template> <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button> <el-dialog title="外层 Dialog" :visible.sync="outerVisible"> <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body> </el-dialog> <div slot="footer" class="dialog-footer"> <el-button @click="outerVisible = false">取 消</el-button> <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button> </div> </el-dialog> </template> <script> export default { data() { return { outerVisible: false, innerVisible: false }; } } </script>标题和底部可水平居中。
将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center> <span>需要注意的是内容是默认不居中的</span> <span slot="footer" class="dialog-footer"> <el-button @click="centerDialogVisible = false">取 消</el-button> <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> </span> </el-dialog> <script> export default { data() { return { centerDialogVisible: false }; } }; </script>Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。
常用于展示鼠标 hover 时的提示信息。
在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
<div class="box"> <div class="top"> <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top"> <el-button>上边</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end"> <el-button>上右</el-button> </el-tooltip> </div> <div class="left"> <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start"> <el-button>左上</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left"> <el-button>左边</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end"> <el-button>左下</el-button> </el-tooltip> </div> <div class="right"> <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start"> <el-button>右上</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right"> <el-button>右边</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end"> <el-button>右下</el-button> </el-tooltip> </div> <div class="bottom"> <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start"> <el-button>下左</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom"> <el-button>下边</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end"> <el-button>下右</el-button> </el-tooltip> </div> </div> <style> .box { width: 400px; .top { text-align: center; } .left { float: left; width: 60px; } .right { float: right; width: 60px; } .bottom { clear: both; text-align: center; } .item { margin: 4px; } .left .el-tooltip__popper, .right .el-tooltip__popper { padding: 8px 10px; } } </style>Tooltip 组件提供了两个不同的主题：dark和light。
通过设置effect属性来改变主题，默认为dark。
<el-tooltip content="Top center" placement="top"> <el-button>Dark</el-button> </el-tooltip> <el-tooltip content="Bottom center" placement="bottom" effect="light"> <el-button>Light</el-button> </el-tooltip>展示多行文本或者是设置文本内容的格式。
用具名 slot 分发content，替代tooltip中的content属性。
<el-tooltip placement="top"> <div slot="content">多行信息<br/>第二行信息</div> <el-button>Top center</el-button> </el-tooltip>除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果： transition 属性可以定制显隐的动画效果，默认为fade-in-linear。 如果需要关闭 tooltip 功能，disabled 属性可以满足这个需求，它接受一个Boolean，设置为true即可。 事实上，这是基于 Vue-popper 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。 当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
<template> <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light"> <el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button> </el-tooltip> </template> <script> export default { data() { return { disabled: false }; } }; </script>tooltip 内不支持 router-link 组件，请使用 vm.$router.push 代替。
tooltip 内不支持 disabled form 元素，参考MDN，请在 disabled form 元素外层添加一层包裹元素。
