vue+elementui 动态给菜单添加底部样式

vue+elementui 动态给菜单添加底部样式

效果图：

其中包含一级菜单和二级菜单 elementui 原本激活样式底部边框长度是整个菜单内容是加上了padding

elementui 原来菜单样式

处理方法使用伪元素：

1 给菜单内容添加一个伪元素：

.border-bottom:after {
  content: "";
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 0px;
  right: 0;
  height: 5px;
  width: var(--wth);
  background-color: #71bdf5;
}

2 这里还使用了css样式中使用变量动态计算宽度 （部分代码）

<el-menu-item
 :style="{'--wth':item.width}"
 :class="item.isactive"
>

大家有更好的方法和提出，这是我的一种解决方法！！！！！！