修改el-submenu里面的el-menu-item样式
时间: 2023-04-04 17:02:41 浏览: 292
可以通过在CSS中使用子选择器来修改el-submenu里面的el-menu-item样式,例如:
.el-submenu > .el-menu-item {
/* 在这里添加样式 */
}
请注意,这只是一个示例,具体的样式修改取决于您的需求。
相关问题
vue的menu中点击el-item但是el-submenu不会收回
这个问题可能是因为你没有正确设置 `unique-opened` 属性。`unique-opened` 属性设置为 `true` 后,只有一个子菜单可以打开,当你点击另一个子菜单时,之前打开的子菜单将自动关闭。你可以尝试在 `el-menu` 标签上添加 `unique-opened` 属性,例如:
```html
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三(无法点击)</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
```
如果你已经设置了 `unique-opened` 属性,但是还是无法正常工作,你可以尝试在 `el-menu` 标签上添加 `collapse` 事件的处理函数,以手动关闭子菜单。例如:
```html
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true" @collapse="handleCollapse">
...
</el-menu>
```
```javascript
methods: {
handleCollapse() {
this.$nextTick(() => {
this.$refs.menu.updateOpened();
});
},
}
```
在上面的例子中,我们在 `handleCollapse` 方法中调用 `updateOpened` 方法来手动关闭子菜单。注意,我们使用了 `$nextTick` 方法来确保 DOM 已经更新完毕。
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" style="padding-left: 5px;font-weight: bold;"> <el-submenu> <template slot="title">分类</template> <div v-for="(types, index) in Types" :key="index"> <el-menu-item>{{ types.tname }}</el-menu-item> </div> </el-submenu> </el-menu>
这是一个使用 Element UI 组件库的 Vue.js 代码片段。这段代码定义了一个水平导航菜单(`el-menu`),默认选中项的索引由 `activeIndex` 变量控制,菜单的模式为水平模式(`mode="horizontal"`),当用户选择菜单项时,会触发 `handleSelect` 方法。在菜单中定义了一个子菜单(`el-submenu`),并使用 `v-for` 指令遍历 `Types` 数组中的元素,在子菜单中为每个元素添加一个菜单项(`el-menu-item`),菜单项的内容为 `types.tname`,其中 `types` 是遍历到的当前元素,`tname` 是该元素的属性。最终的效果是在菜单中显示了一个名为“分类”的子菜单,子菜单中包含了多个菜单项,每个菜单项的内容为 `Types` 数组中的元素的 `tname` 属性。
阅读全文