ElementUI - Dropdown - 通过 margin 负值 调整弹出位置

效果

结构代码

 <span @click.stop="() => {}">
    <el-dropdown
      trigger="hover"
      placement="bottom-start"
      class="housedropDown"
      @command="handleClick" // 选项被点击
    >
      <span class="el-dropdown-link">
        <el-button type="text" size="small"> 更多 </el-button>
      </span>
      <el-dropdown-menu class="more-card__dropdown" slot="dropdown">   // 设置自定义类名 more-card__dropdown
        <el-dropdown-item :command="{ type: 'del', row: scope.row }" // 选项点击事件传参进行相应的操作
          >删除</el-dropdown-item
        >
        <el-dropdown-item :command="{ type: 'dis', row: scope.row}"
          >{{ scope.row.disabled === 0 ? "禁用" : "启用" }}</el-dropdown-item
        >
        <el-dropdown-item
          style="color: #4260db"
          v-if="scope.row.children"
          :command="{ type: 'add', row: scope.row }"
          >新增子级</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    </span>

methods

// 更多中的选项被点击
    handleClick(command) {
      console.log(command); // { type: 'del', row: scope.row }
    },

添加全局样式

.more-card__dropdown{
    padding: 0!important;
    width: 82px;
    // text-align: center;
    // transition-delay: 0s;
    box-sizing: border-box;
    margin-top: 4px!important;
    // transform: translateY(-8px);
     .el-dropdown-menu__item{
    padding: 0px 12px!important;
  }
 
  .el-dropdown-menu__item:not(.is-disabled):hover{
      color: #4260db;;
  }
}