Element：改变原生 el-dropdown 的样式

调整前：

调整后：

前情

在用 el-dropdown 的时候，不知道为什么一个页面中的某个 dropdown 的间距过大，其他的都很正常，所以需要 调整许多 el-dropdown 中一个的样式。

• 但 ElementUI 会有自己的样式，他绑定的 id 会动态变化，每个 el 标签的类名也是一致的。
• 看了其他博主的解法，说 >>> 和 /deep/ 快被废弃了，说不建议使用，也不知道真假。
  • >>> 或 /deep/ 可用于加了 scoped 的style 中，不会污染其他组件，同时要使用 less 或 sass
  • 外层 >>> 第三方组件 { 样式 }

一：在整个 el 标签的外层加上一个 div ，在 div 上加上类名来选中？(我失败了)

<div class="newDrop">
	<el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-badge class="right-menu-item">
            <svg-icon icon-class="alert"/>
          </el-badge>
        </span>
        <el-dropdown-menu slot="dropdown" :style="styleObject" v-if="length > 0">
          <template>
            <el-dropdown-item>
              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                style="color: red"
                @click="allRead"
              >
                全部已读</el-button
              >
            </el-dropdown-item>
          </template>
          
            <template v-if="unReadInnerMsgList">
            <el-dropdown-item
              v-for="(item, index) in unReadInnerMsgList"
              :key="index"
            >
            </el-dropdown-item>
            </template>
        </el-dropdown-menu>
        
        <el-dropdown-menu v-else>
          <el-dropdown-item>
            <div>暂无未读消息</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

这样做直接导致我的图标没有显示

二、成功的方法：在 el-dropdown-menu 上加类名

 <el-dropdown-menu slot="dropdown" :style="styleObject" v-if="length > 0" class="newDrop">
          <template>
            <el-dropdown-item>
              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                style="color: red"
                @click="allRead"
              >
                全部已读</el-button
              >
            </el-dropdown-item>
          </template>
          
            <template v-if="unReadInnerMsgList">
            <el-dropdown-item
              v-for="(item, index) in unReadInnerMsgList"
              :key="index"
            >
              <router-link
                v-if="item.msgType == 1"
                to="/info/history"
                style="margin-left: 0"
                @click.native="updateNoticeState(item.id, item.msgType)"
              >
                <div>
                  <svg-icon icon-class="fire-fight"></svg-icon>
                  <span style="font-size: 12px">
                    {{ item.time }}
                  </span>
                </div>
                <div style="font-size: 12px; padding-top: 0; margin-top: -10px">
                  {{ item.content }}
                </div>
              </router-link>
            </el-dropdown-item>
            </template>
        </el-dropdown-menu>
        
        <el-dropdown-menu class="newDrop" v-else>
          <el-dropdown-item>
            <div>暂无未读消息</div>
          </el-dropdown-item>
        </el-dropdown-menu>

然后再新写一个 没有 scoped 的 style

<style>
.newDrop {
  top: 50px !important;

}
 .el-popper[x-placement^="bottom"]{
  margin-top: 5px; // 调整所有 el-dropdown-menu 的样式
}
</style>

• 未写 scoped 的 style 可以作用于整个项目中，要注意此处的类名设置