Vue3 修改el-sub-menu的下拉箭头

在Vue3中，Element UI库中的`el-sub-menu`组件默认有一个下拉箭头，用于表示菜单项是否展开。如果你想修改这个箭头的样式或显示状态，可以通过CSS样式覆盖或者利用Vue的动态绑定和自定义指令来实现。

1. **通过CSS覆盖**:
在你的CSS文件或者`:deep()`选择器中，找到`el-submenu-item__arrow`类，并更改其相关的样式，比如颜色、图标等：

   .el-submenu-item__arrow {
     color: your-color; /* 修改箭头颜色 */
     font-size: your-font-size; /* 修改字体大小 */
     background-image: url(your-icon-url); /* 使用自定义图片作为箭头 */
   }

2. **动态控制显示与隐藏**:
如果你想根据某种条件来动态地控制箭头的展示或隐藏，可以在模板中使用`v-if`或`v-show`指令：

   <el-sub-menu :title="menuTitle" v-if="shouldShowArrow">
     <!-- ... -->
   </el-sub-menu>

然后在你的Vue实例中设置`shouldShowArrow`的值。

3. **自定义指令**:
另外，如果你想要更深层次的定制，可以创建一个自定义指令，监听某个数据变化并相应地更新箭头状态：

   // 在Vue实例的methods或directives中定义一个方法
   directives: {
     customArrow ({ el, value }) {
       if (value) {
         el.querySelector('.el-submenu-item__arrow').classList.add('custom-class');
       } else {
         el.querySelector('.el-submenu-item__arrow').classList.remove('custom-class');
       }
     }
   }

   // 在模板上应用该指令
   <el-sub-menu :title="menuTitle" @some-event="customArrow" :custom-arrow="shouldShowCustomArrow">
     <!-- ... -->
   </el-sub-menu>

记得在完成后进行适当的