当前位置：首页 > news >正文

自定义 el-menu

news 来源：原创 2025/4/26 13:54:42

使用的工具：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>