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-menu> </el-dropdown> :append-to-body="false" 使下拉内容不插入在Body 中;stye 修改样式宽度 要修改其他样式 .el-dropdown-menu { position: absolute!important; top: 0px!important; left: 0px!important; } el-dropdown 下拉框中三角形隐藏方法 .el-popper {...
el-dropdown-menu el-table Reproduction Link Link Steps to reproduce 复制该代码到环境中,已在playground中确认。 单击第二个表格的更多,然后单击删除,弹出弹出框要确认,此时下拉菜单消失,弹出框飘到浏览器左上角。 What is Expected? 弹出的确认框应该一直在原来删除的位置下面。
::v-deep .popper-select{position:absolute!important;top:35px!important;left:0px!important;} 总结 不再动态计算元素的位置,也不让它们插入到body中,而是让下拉框绝对定位到父元素上,从而实现子绝父相。 包含dropdown在内的所有下拉同样处理方法!
官网上,通过设置hide-on-click来控制点击菜单项后隐藏菜单,布尔类型,默认true 当想用Dropdown做二级菜单时,可以在el-dropdown-item里加一个下拉菜单,例如如下效果图: 点击更多,展示一级菜单,菜单1有二级菜单,其它菜单项无二级;此时要求点击有二级菜单的菜单项后,
下拉菜单 start */ /* 设置最外层的div */ .sort { display: inline-flex; width: 50%; height: 100%; margin-left: 40px; justify-content: flex-start; align-items: center; } .el-dropdown-link { cursor: pointer; } .el-dropdown { font-size: 16px; } /* 设置弹出框的宽高 */ .el...
下拉菜单 <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="沙县小吃"> 沙县小吃 </el-dropdown-item> <el-dropdown-item command="兰州拉面"> 兰州拉面 </el-dropdown-item> <el-dropdown-item command="肉夹馍" disabled> 肉夹馍 </el-drop...
1. el-dropdown 的样式定制 在使用 el-dropdown 组件时,需要确保其样式与当前页面的设计风格保持一致。可以通过设置 class-prefix 属性和自定义 CSS 样式来对 el-dropdown 组件进行定制,以满足实际的设计需求。 2. el-dropdown 的交互效果 在配置 el-dropdown 组件时,需要注意触发按钮的位置和下拉菜单的显示方...