vue根据定义data的变量修改elementui 导航二级菜单样式 解决适配一级菜单宽度问题

在做项目的时候需要根据导航栏每行的宽度改变二级菜单宽度的显示，因为elementui导航样式默认最小宽度200px，源码如下：

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
    min-width: 200px;
}

需要动态改变min-width的值。

解决：

• 导航点击事件：在点击展开菜单@open事件中判断展开导航的index,根据不同的导航赋值不同的width。
• CSS设置：一开始考虑通过css动态改变样式的方法，给变量赋值 this.$el.style.setProperty("--width",this.width);但是由于elementui菜单的二级菜单脱离文档流，不在el里修改样式所以采取

let element = document.querySelector(".el-menu--popup")
element.style.width = this.width

代码：

最终效果：

二级菜单宽度自适应父级菜单宽度