使用elementui中el-collapse折叠面板 实现下拉菜单

在使用 Element UI 的 el-collapse 折叠面板组件实现下拉菜单时，你可以将 el-collapse-item 组件用于每个可折叠的菜单项。下面是一个简单的例子：

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item title="菜单1" name="1">
      <div>菜单1的内容</div>
    </el-collapse-item>
    <el-collapse-item title="菜单2" name="2">
      <div>菜单2的内容</div>
    </el-collapse-item>
    <el-collapse-item title="菜单3" name="3">
      <div>菜单3的内容</div>
    </el-collapse-item>
  </el-collapse>
</template>
 
<script>
export default {
  data() {
    return {
      activeNames: ['1'] // 默认展开第一个菜单
    };
  },
  methods: {
    handleChange(activeNames) {
      console.log('当前展开的菜单:', activeNames);
    }
  }
};
</script>

在这个例子中，activeNames 是一个数组，包含了当前展开的菜单项 name 属性。el-collapse 组件的 v-model 绑定了 activeNames，这样可以实现菜单项的展开/折叠状态与数据的双向绑定。handleChange 方法用于监听折叠面板的变化。

确保在使用此代码时，已经正确安装并导入了 Element UI，并在 Vue 中进行了注册。