el-dropdown-menu动态

### element-ui el-dropdown-menu 动态用法

#### 属性介绍

`el-dropdown-menu` 是 `el-dropdown` 组件的一部分，通常用来展示下拉菜单的内容。其主要属性如下：

- **type**: 可能用于定义下拉菜单的样式或类型（具体取决于 Element UI 的版本和组件实现）[^2]。
- **placement**: 定义下拉菜单相对于触发元素的位置，常见的取值有 top、bottom、top-start、bottom-start 等。
- **trigger**: 触发方式，默认支持 hover 和 click 两种模式。

为了实现更灵活的应用场景，可以通过编程方式控制 `el-dropdown-menu` 的显示与隐藏以及动态更新菜单项。

#### 动态用法示例

下面是一个简单的例子来说明如何通过 Vue.js 实现 `el-dropdown-menu` 的动态加载数据并响应用户交互操作:

<template>
  <div class="example">
    <!-- 使用 v-model 控制 dropdown 显示状态 -->
    <el-dropdown ref="dropdownRef" @command="handleCommand" trigger="click">
      <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
      <el-dropdown-menu slot="dropdown">
        <!-- 循环渲染 menu items -->
        <el-dropdown-item :key="item.value" v-for="item in dynamicItems">{{ item.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <button @click="toggleDropdown()">切换</button> <!-- 手动打开/关闭下拉框按钮 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dynamicItems: [
        { value: 'option1', label: '黄金糕' },
        { value: 'option2', label: '双皮奶' }
      ]
    };
  },
  
  methods: {
    handleCommand(command) {
      console.log(`选中了 ${command}`);
    },

    toggleDropdown() {
      this.$refs.dropdownRef.show(); // 或者使用 hide()
    }
  }
};
</script>

在这个案例里，展示了怎样利用 JavaScript 来管理 `el-dropdown-menu` 中的数据源 (`dynamicItems`) 并且实现了手动调用 API 接口改变下拉列表可见性的功能。此外还绑定了 `@command` 事件监听器以便处理用户的选项选择行为[^3]。