Element-ui のサイドバー リスト ドロップダウン ボックスの子の幅を変更する

問題の説明

vue プロジェクトが element-ui のサイドバーを導入する場合、サイドバーのサイズが 180px に調整されると、ドロップダウン リストのサブ項目の幅が超過します (デフォルトは 200px)。

更新する

1. 方法2を追加すると修正が簡単になります

写真が示すように:

---

原因分析:

リストのデフォルト スタイルの子項目の幅は、親項目の幅と同じになるように正しく変更されません。つまり、< ul > の
下の < li > は、< ul > と同じ幅を維持できません。

---

解決策 1:

1. ブラウザ F12 を押して要素選択を開き、対応する要素オプションをクリックします。

2. スタイル領域を見つけて、min-width：200px設定項目を確認します。

3. プロンプトに従ってパスを見つけます。node_modules/element-ui/lib/theme-chalk/index.css

4. CSS ファイルを開いて、対応する要素を見つけます。構成項目:

にmin-width：200px変更しますmin-width: 100%;

解決策 2:

• 対応する SideBar スタイルに追加します。

解決策 2:

• 対応する SideBar スタイルに追加します。

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

• 効果は同じであり、依存関係を再インストールした後も影響を受けません。

---

結果を示す：