element-plus中select下拉框placement改变位置不生效

最新推荐文章于 2025-04-28 18:46:16 发布

程先生哈

最新推荐文章于 2025-04-28 18:46:16 发布

阅读量3.9k

点赞数 2

文章标签： vue.js 前端 elementui

本文链接：https://blog.youkuaiyun.com/qq_35073135/article/details/131974717

版权

文章描述了一个项目从Vue2和element-ui升级到Vue3和element-plus后遇到的下拉框选项位置问题。解决方案包括调整下拉框内容的宽度和设置placement属性为bottom-end，同时添加margin-right来确保下拉框在右侧正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：项目从Vue2升级到了Vue3，然后element-ui升级成了element-plus。

原来的下拉框截图：

下拉框中的选项是在下拉框的下面。

现在的下拉框截图：

下拉框中的选项在下拉框的左侧。

位置和原来的不一样，造成了用户使用不太习惯。所以从element-plus的文档中找到了对应的属性：placement

先看下官网的解释：

Select 选择器 | Element Plus (element-plus.org)

默认的就是bottom-start，然后我改成bottom和bottom-end，发现都是不可以使用的。

然后通过对里面的DOM元素的分析，看到了位置不正确，是因为下面的下拉框的内容的宽度大于了下拉框的宽度，造成了不能在下面显示。又因为我的下拉框是在页面的右侧，所以下拉框内容只能显示在了左侧。

综上两个解决办法：

1、设置下拉框内容的宽度，让他的宽度小于等于下拉框的宽度；

2、给下拉框设置一个margin-right：4px，然后给：placement设置成为bottom-end;(亲测可用，详情请看)

<template>
  <div id="wbTabDom">
    <!-- 左侧面包屑 -->
    <ul>
      <li v-for="item in tabList" :key="item.tag" :class="tabListSelected == item.tag ? 'sel' : ''"
        @click="tabClick(item)" @contextmenu.prevent="tabRightClick($event, item)">
        <!-- 图标，如果是站点的话，使用svg的格式 -->
        <svg class="icon" aria-hidden="true" v-if="item.isStation && (!item.hasOwnProperty('status'))">
          <use xlink:href="#icon-gewulogo-color"></use>
        </svg>
        <!-- 图标，如果是站点的话，使用svg的格式 -->
        <svg class="icon" aria-hidden="true" v-else-if="(item.status == 'stop' && item.isStation == true)">
          <use xlink:href="#icon-gewulogo-black"></use>
        </svg>
        <i class="iconfont" :class="item.iconName" v-else></i>
        <!-- 图标，如果是站点的话，使用svg的格式END -->
        <p>{{ item.name }}</p>
      </li>
    </ul>
    <!-- 关闭按钮 -->
    <div class="closeBtn" @click="closeTag" v-show="tabList.length > 1">
      <i class="iconfont icon-close"></i>
    </div>
    <!-- 视图选择 -->
    <div class="rightSheetDom">
      <el-select v-model="sheetType" @change="selectChange" placeholder="请选择" :placement="'bottom-end'">
        <el-option v-for="item in sheetList" :key="item.name" :label="item.displayName" :value="item.name">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<style lang="scss">
.rightSheetDom {
    width: 160px;
    margin-right: 4px;
    :deep(.el-input__wrapper) {
      border: none;
      box-shadow: none;
      background: #ebebeb;
      height: 28px;
    }
  }
</style>