1 打开一个vue文件，添加一个el-dropdown下拉框组件。如图 2 在el-dropdown标签上添加 placement="top"，用于设置下拉菜单弹出显示在顶部。如图 3 保存vue文件后使用浏览器打开，鼠标滑过下拉菜单即可看到弹出位置显示在顶部了。如图
排查后发现是由于前面几个元素使用了v-if导致页面重绘之后,el-dropdown挂载到根节点上了,导致el-dropdown位置偏移到最左上角, 其他元素的v-if改为v-show就可以了。合理使用v-if /v-show
</el-dropdown-item> <el-dropdown-item> <router-link to="/recyle">号商回收</router-link> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> :append-to-body="false" 使下拉内容不插入在Body 中;stye 修改样式宽度 要修改其他样式 .el-dropdown-menu { position: absolute!important; ...
不再动态计算元素的位置,也不让它们插入到body中,而是让下拉框绝对定位到父元素上,从而实现子绝父相。 包含dropdown在内的所有下拉同样处理方法!