Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式

Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式

今天在项目中碰到一个 UI 改造的需求，需要根据设计图把页面升级成 UI 设计师提供的设计图样式。
到最后页面改造完了，但是 UI 提供的下拉菜单样式全部是黑色半透明的，只能硬着头皮改了。
然后，就有了一下午的头脑风暴。

一开始，我是想着使用 /deep/ 来深度修改样式的，于是就有了下面的代码:

结果不生效，开始纳闷，为什么什么样式都没有应用上去。
后来查找网上大神，说不可以加 scoped 的私有化。于是我删除后再试，确实是有效，三角也变成了黑色。

然后，第二个问题又来了。
因为没有加 scoped 私有化，所以系统中所有的 Dropdown 的样式都变成了全黑色且三角也是黑色。
这肯定不行啊，于是又开始头脑风暴。

本来都准备使用原生直接获取 after 的元素了，后来发现不太行，能获取到但是修改 after 伪元素太麻烦了，需要添加样式表什么的。

然后我又在想，我可不可以给他加个 class 类名，我去应用它的样式。于是就有了下面的代码：

// 注意 class=“header-new-drop”
<el-tree
      class="tree"
      :data="trees"
      :props="treeProps"
      @node-click="treeclick"
      node-key="id"
      :auto-expand-parent="autoExpandParent"
      :showIcon="showIcon"
      icon-class="el-icon-arrow-right"
      highlight-current
      @click.stop="click(item,$event)"
  >
    
    <span class="custom-tree-node" slot-scope="{ node, data }">
          <el-dropdown trigger="hover" placement="bottom">
            <span class="el-dropdown-link">
              {{ node.label }}
            span>
            <el-dropdown-menu slot="dropdown" class="header-new-drop">
              <el-dropdown-item command="rename" @click.native="renameclick(data)" @rename="rename">重命名el-dropdown-item>
              <el-dropdown-item command="delete" @click.native="deleteclick(data)" @drop="drop">删除el-dropdown-item>
            el-dropdown-menu>
          el-dropdown>
      span>
  el-tree>

类名加上之后，就要去用它了，这次我仍然在带有 scoped 私有化标致的样式块中定义：

好啦，大功告成，这样只在这个文件中的 Dropdown 会应用此样式，别的文件不会受到影响。
头脑风暴了一下午。