<el-scrollbar style="height:100%">
<div class="service-catalog-container" id="service-catalog-container">
<el-menu
default-active="1"
class="menu-bar-width"
@open="handleOpen"
@close="handleClose"
background-color="#1e1e2d"
text-color="#fff"
active-text-color="#ffd04b" >
<!--style="overflow-y: scroll;"-->
<template v-for="(item, key) in serviceCatalogData">
<el-submenu v-if="item.subject"
:key="key" :index="item.subject.name">
<template slot="title">
<!--<i class="el-icon-menu"></i>-->
<span>{{ item.subject.name }}</span>
</template>
<el-submenu v-for="(val, index) in item.types"
:index="val.type.name" :key="index">
<template slot="title">
<!--<i class="el-icon-menu"></i>-->
<span>{{ val.type.name }}</span>
</template>
<el-menu-item v-for="(svcVal, svcIndex) in val.svcInfo"
:key="svcIndex" :index="svcVal.svcName"
v-if="val.svcInfo && val.svcInfo.length > 0"
@click="handleClick(svcVal, svcIndex)">
<template slot="title">
<i class="el-icon-document"></i>
<span slot="title">{{ svcVal.svcName }}</span>
</template>
</el-menu-item>
</el-submenu>
</el-submenu>
</template>
</el-menu>
</div>
</el-scrollbar>
.el-scrollbar__wrap {
overflow-x: hidden;
}
滚动条之el-scrollbar
这段代码展示了一个使用Vue.js和Element UI的El-Scrollbar及El-Menu组件创建的多级菜单。菜单数据动态加载,具备子菜单展开关闭监听以及点击事件处理。整个结构适用于构建高度自定义的服务目录或导航系统。
摘要由CSDN通过智能技术生成