下拉菜单elment

### Element UI 下拉菜单使用方法

#### 导入 Element UI 库
为了在项目中使用 Element UI 的组件，需先导入该库并应用默认的主题样式。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

此段代码确保了整个应用程序可以访问到所有的 Element UI 组件及其样式[^2]。

#### 基础属性配置
`Dropdown Menu` 提供了一些重要的属性来定制其行为：

- `type`: 可能影响下拉菜单外观的设计风格。
- `placement`: 控制下拉菜单相对于触发器的位置，比如 top, bottom 等方向。
- `trigger`: 设定如何激活下拉菜单的动作模式，支持 hover 和 click 方式。

这些设置使得开发者能够灵活调整用户体验和界面布局[^1]。

#### 关键事件处理
当用户选择了某个选项时会触发 `command` 事件。这允许开发人员监听用户的交互动作并对之作出响应。

<el-dropdown @command="handleCommand">
    <!-- 菜单按钮 -->
</el-dropdown>
<script>
export default {
  methods: {
    handleCommand(command) {
      console.log(`selected item is ${command}`);
    }
  }
}
</script>

上述例子展示了怎样捕获用户的选择并通过 JavaScript 函数来进行进一步的操作。

#### 实际案例展示
对于更复杂的需求场景，如带有搜索功能的下拉列表，则可以通过组合其他组件实现。下面是一个简单的实例说明如何创建一个可搜索单选框形式的下拉菜单[^3]:

<div class="searchable-select">
  <el-input v-model="filterText" placeholder="Type to search"></el-input>
  <el-dropdown :visible-arrow="false" trigger="click">
    <span class="el-dropdown-link">{{ selectedValue || "Select an option..." }}</span>
    <template slot="dropdown">
      <el-dropdown-menu>
        <el-dropdown-item 
          v-for="(item,index) in filteredOptions"
          :key="index"
          :command="item.value"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</div>

<script>
data() {
  return {
    filterText: '',
    options: [
      { value: 'option1', label: 'Option One' },
      { value: 'option2', label: 'Option Two' },
      // 更多选项...
    ],
    selectedValue: ''
  };
},
computed: {
  filteredOptions() {
    const text = this.filterText.toLowerCase();
    return this.options.filter(option => !text || option.label.toLowerCase().includes(text));
  }
},
methods: {
  handleCommand(value) {
    this.selectedValue = value;
  }
};
</script>

这段代码片段不仅实现了基本的下拉选择逻辑，还加入了实时过滤机制以便于快速定位目标项。