赞
踩
背景:项目从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>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。