Modifique el ancho del cuadro desplegable secundario de la lista de la barra lateral en Element-ui

Descripción del problema

Cuando el proyecto vue presenta la barra lateral de element-ui, cuando el tamaño de la barra lateral de la barra lateral se ajusta a 180 px, el ancho del subelemento de la lista desplegable excederá (el valor predeterminado es 200 px).

renovar

1. Es más fácil de modificar agregando el método 2

como muestra la imagen:

---

Análisis de causa:

El ancho del elemento secundario en el estilo predeterminado de la lista no se modifica correctamente para que sea el mismo que el elemento principal,
es decir, el < li > debajo de < ul > no puede mantener el mismo ancho que el < ul >.

---

Solución 1:

1. Navegador F12 para abrir la selección de elementos, haga clic en la opción de elemento correspondiente:

2. Busque el área de estilo y mire min-width：200pxel elemento de configuración:

3. Busque la ruta de acuerdo con el aviso: node_modules/element-ui/lib/theme-chalk/index.css

4. Abra el archivo css para encontrar el correspondiente elemento de configuración: modifíquelo

amin-width：200pxmin-width: 100%;

Solución 2:

• Agregue al estilo SideBar correspondiente:

Solución 2:

• Agregue al estilo SideBar correspondiente:

  /deep/ .el-submenu .el-menu-item{
        
         min-width:100%}
  

• El efecto es el mismo y no se verá afectado después de reinstalar las dependencias.

---

Mostrar resultados: