Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

基础用法

移动到下拉菜单上，展开更多操作。

数据源 model 需要遵循一定的结构，详见文末的参考

<el-dropdown [model]="data" (selected)="handle($event)">
  下拉菜单
</el-dropdown>
<script type="text">
// in component:
data: any[] = [{
  value: 'huangjingao',
  label: '黄金糕',
}, {
  value: 'shizitou',
  label: '狮子头',
}, {
  value: 'luosifen',
  label: '螺蛳粉',
}]
</script>

触发方式

可以配置 click 激活或者 hover 激活。

在 trigger 属性设置为 click 即可。

<div el-row class="block-col-2">
  <div el-col span="12">
    <span class="demonstration">hover 激活</span>
    <el-dropdown [model]="data">
      下拉菜单
    </el-dropdown>
  </div>
  
  <div el-col span="12">
    <span class="demonstration">click 激活</span>
    <el-dropdown trigger="click" [model]="data">
      下拉菜单
    </el-dropdown>
  </div>
</div>

禁用单项

禁用某一个选项

设置数据源的某一项 elDisabled 为 true 即可禁用此选项

<el-dropdown [model]="data2">
  下拉菜单
</el-dropdown>
<script type="text">
// in component:
data2: any[] = [{
  value: 'huangjingao',
  label: '黄金糕',
}, {
  value: 'shizitou',
  label: '狮子头',
  elDisabled: true,
}, {
  value: 'luosifen',
  label: '螺蛳粉',
}]
</script>

显示分割线

为单个选项增加分割线

设置数据源的某一项 divided 为 true 即可禁用此选项

<el-dropdown [model]="data3">
  下拉菜单
</el-dropdown>
<script type="text">
// in component:
data3: any[] = [{
  value: 'huangjingao',
  label: '黄金糕',
  divided: true,
}, {
  value: 'shizitou',
  label: '狮子头',
}, {
  value: 'luosifen',
  label: '螺蛳粉',
}]
</script>

按钮模式

可使用按钮触发下拉菜单。

设置数据源的某一项 divided 为 true 即可禁用此选项

<el-dropdown [model]="data3"
  [split-button]="true"
  type="primary">
  下拉菜单
</el-dropdown>

Dropdown Attributes