修改NavMenu导航菜单的展开按钮

element中的NavMenu展开样式默认是这样的，向上或向下的箭头

但实际需求是要改成实体的小三角，查看源码发现默认的箭头是采用i标签实现的，类名对应那个小箭头，所以我们可以从改变类名的角度思考。

<i class="el-submenu__icon-arrow el-icon-arrow-down">::before</i>

怎么替换类呢，我们可以使用指令，具体实现如下：

<el-submenu v-bottom :index="val.model" :key="val.id" v-if="val.children.length > 0">

 directives: {
      bottom: {
          bind(el) {
              let icon = el.getElementsByClassName('el-submenu__icon-arrow el-icon-arrow-down')[0];
              icon.className = 'el-submenu__icon-arrow el-icon-caret-bottom';
              icon.style.fontSize = '15px';
          }
      }
  }

使用指令之后，样式修改成功，效果如图：