el-sub-menu 竖线

el-sub-menu是Element UI框架中的一个组件，用于创建垂直的子菜单。而竖线（|）通常用于表示分隔符或者边界。如果你想在el-sub-menu的子菜单项之间添加竖线分隔符，可以使用CSS样式来实现。

你可以通过以下步骤来添加竖线分隔符：

1. 在el-sub-menu组件的父元素上添加一个class，比如"menu-with-divider"。
2. 在你的CSS文件中，为这个class定义样式。

.menu-with-divider .el-menu-item:not(:last-child) {
  border-right: 1px solid #ebeef5; /* 设置竖线的样式 */
}

这个样式将会给.el-menu-item的所有非最后一个子元素添加一个右边框，形成竖线分隔符的效果。

记住，这只是一种可能的实现方式，你可以根据自己的需求进行调整。希望这个解决方案能够帮到你！如果有任何问题，请随时提问。

相关问题

el-sub-menu嵌套el-sub-menu时高亮问题

在使用 Element UI 的`el-sub-menu`组件进行嵌套时，可能会遇到子菜单项无法正确高亮的问题。这通常是因为子菜单项没有正确地从父级`el-menu`获取到激活状态。为了解决这个问题，你可以使用`unique-opened`属性，该属性确保了在多层菜单结构中，只会有一个`el-sub-menu`是展开的。

如果使用`unique-opened`属性后仍然存在问题，可以尝试以下方法：

1. 确保你的`el-menu`组件的`default-active`属性设置正确，它指定了初始选中的菜单项。
2. 检查是否有JavaScript错误导致事件监听或状态更新不正确。
3. 确保所有菜单项的`index`属性是唯一的，这样Element UI才能正确地追踪和管理菜单状态。

如果你已经尝试了上述方法但问题依旧存在，可能需要检查Element UI版本是否为最新，或者查看官方文档和社区论坛获取更多可能的解决方案。

el-sub-menu下级嵌套el-sub-menu高亮问题

在使用Element UI框架开发时，`el-sub-menu`是其中的一个组件，它用于创建下拉菜单中的子菜单项。有时候，我们可能会遇到下级嵌套`el-sub-menu`时高亮不正确的问题。这个问题通常是因为Element UI默认情况下只能保证当前激活的菜单项高亮，而不包括嵌套层级中的其他`el-sub-menu`。

要解决这个问题，你可以采取以下措施：

1. 确保每一级的`el-sub-menu`都有一个唯一的`index`属性，这样Element UI可以追踪当前激活的路径。
2. 如果你使用的是`el-menu`的`unique-opened`属性，确保嵌套的`el-sub-menu`也遵循这个规则。`unique-opened`属性默认只展开一个子菜单，如果要展开多级子菜单，需要确保正确处理这个属性或通过其他方式实现。
3. 如果你有自定义的逻辑来处理菜单的激活状态，确保更新所有相关的`el-sub-menu`使其高亮。

为了确保下级嵌套的`el-sub-menu`也能正确高亮，你可能需要编写一些额外的JavaScript代码来监听菜单项的点击事件，并相应地更新菜单的激活状态。