当前位置:   article > 正文

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

el-select placement

        背景:项目从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;(亲测可用,详情请看)

  1. <template>
  2. <div id="wbTabDom">
  3. <!-- 左侧面包屑 -->
  4. <ul>
  5. <li v-for="item in tabList" :key="item.tag" :class="tabListSelected == item.tag ? 'sel' : ''"
  6. @click="tabClick(item)" @contextmenu.prevent="tabRightClick($event, item)">
  7. <!-- 图标,如果是站点的话,使用svg的格式 -->
  8. <svg class="icon" aria-hidden="true" v-if="item.isStation && (!item.hasOwnProperty('status'))">
  9. <use xlink:href="#icon-gewulogo-color"></use>
  10. </svg>
  11. <!-- 图标,如果是站点的话,使用svg的格式 -->
  12. <svg class="icon" aria-hidden="true" v-else-if="(item.status == 'stop' && item.isStation == true)">
  13. <use xlink:href="#icon-gewulogo-black"></use>
  14. </svg>
  15. <i class="iconfont" :class="item.iconName" v-else></i>
  16. <!-- 图标,如果是站点的话,使用svg的格式END -->
  17. <p>{{ item.name }}</p>
  18. </li>
  19. </ul>
  20. <!-- 关闭按钮 -->
  21. <div class="closeBtn" @click="closeTag" v-show="tabList.length > 1">
  22. <i class="iconfont icon-close"></i>
  23. </div>
  24. <!-- 视图选择 -->
  25. <div class="rightSheetDom">
  26. <el-select v-model="sheetType" @change="selectChange" placeholder="请选择" :placement="'bottom-end'">
  27. <el-option v-for="item in sheetList" :key="item.name" :label="item.displayName" :value="item.name">
  28. </el-option>
  29. </el-select>
  30. </div>
  31. </div>
  32. </template>
  33. <style lang="scss">
  34. .rightSheetDom {
  35. width: 160px;
  36. margin-right: 4px;
  37. :deep(.el-input__wrapper) {
  38. border: none;
  39. box-shadow: none;
  40. background: #ebebeb;
  41. height: 28px;
  42. }
  43. }
  44. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/890769
推荐阅读
相关标签
  

闽ICP备14008679号