使用的工具：vue2 + element-ui
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-menu--horizontal {
border-bottom: none !important;
}
.el-menu--horizontal .el-menu-item {
height: 40px;
line-height: 40px;
}
.el-menu--horizontal>.el-submenu .el-submenu__title {
height: 40px;
line-height: 40px;
}
.el-icon-arrow-down {
display: none;
}
.el-submenu__title {
padding: 0;
}
.is-active .el-submenu__title {
border-bottom: none !important;
color: #fff !important;
}
.is-active {
background-color: #d3d4d6;
}
</style>
</head>
<body>
<div id="app">
<div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
<el-submenu v-for="(item, index) in menuItems" :key="index" :index="item.index">
<template slot="title">
<el-menu-item style="border-right: 1px solid #bfbfbf;content: '';">
{{ item.name }}
</el-menu-item>
</template>
<el-menu-item v-for="(subItem, subIndex) in item.subItems" :key="subIndex"
@click="handleClick(item,subItem)" :index="item.index + '-' + 0">
{{ subItem.name }}
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
activeIndex: '0',
menuItems: [
{ name: '常用商品', index: '1', subItems: [{ name: '全部' }, { name: '中型犬1-3kg以下' }, { name: '狗狗美容' }] },
{ name: '短毛猫洗护', index: '2', subItems: [{ name: '全部' }, { name: '小型犬3-6kg' }] },
{ name: '长毛猫洗护', index: '3', subItems: [{ name: '全部' },] },
{ name: '猫咪单项服务', index: '4', subItems: [{ name: '全部' }, { name: '狗狗洗澡1-3kg以下' }] }
],
originalNames: {}
};
},
created() {
const firstMenu = this.menuItems[0];
this.activeIndex = firstMenu.index + '-' + 0;
// 初始化时保存每个一级菜单的原始 name 值
this.menuItems.forEach(item => {
this.$set(this.originalNames, item.index, item.name);
});
},
methods: {
handleClick(item, subItem) {
this.activeIndex = item.index + '-' + 0;
this.menuItems.forEach(v => {
if (item.index === v.index) {
if (subItem.name == "全部") {
item.name = this.originalNames[item.index];
}
else {
v.name = subItem.name
}
}
});
},
}
});
</script>
</body>
</html>