element-plus手风琴二级菜单

C知道: element-plus 是一个基于 Vue.js 的 UI 组件库，它提供了丰富的组件和样式，可以帮助我们快速构建美观易用的前端界面。关于手风琴二级菜单的使用，element-plus 提供了 Collapse 组件来实现该功能。

在 Collapse 组件中，我们可以使用 CollapseItem 组件来定义每个手风琴项。其中，CollapseItem 的 title 属性可以设置手风琴项的标题，content 属性可以设置手风琴项的内容。

下面是一个简单的示例代码，演示了如何使用 element-plus 的 Collapse 组件实现手风琴二级菜单：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="一级菜单1" name="1">
      <el-collapse v-model="activeSubNames">
        <el-collapse-item title="二级菜单1" name="1-1">
          二级菜单1的内容
        </el-collapse-item>
        <el-collapse-item title="二级菜单2" name="1-2">
          二级菜单2的内容
        </el-collapse-item>
      </el-collapse>
    </el-collapse-item>
    <el-collapse-item title="一级菜单2" name="2">
      <el-collapse v-model="activeSubNames">
        <el-collapse-item title="二级菜单3" name="2-1">
          二级菜单3的内容
        </el-collapse-item>
        <el-collapse-item title="二级菜单4" name="2-2">
          二级菜单4的内容
        </el-collapse-item>
      </el-collapse>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref([]);
    const activeSubNames = ref([]);

    return {
      activeNames,
      activeSubNames,
    };
  },
};
</script>

在上述示例中，我们使用了两个 Collapse 组件嵌套来实现手风琴效果。外层 Collapse 组件用来控制一级菜单的展开与折叠，内层 Collapse 组件用来控制二级菜单的展开与折叠。通过 v-model 指令绑定相应的数据变量，可以实现手风琴菜单的状态控制。

希望这个示例对你有帮助，如果有任何问题，请随时向我提问！