版本Element Plus版本号2.13.2问题现象开发中使用el-dropdown悬浮展开下拉菜单时append-to已经绑定了父元素但是el-dropdown内容依旧挂载到body元素上原因el-dropdown默认开启teleportedtrue下拉 DOM 被挂载到body。如果想要append-to生效那么需要手动设置teleportedfalse简单 Demo文件代码template div classlist-wrap div classlist-item v-foritem in list :keyitem.id :refel domMap.set(item.id, el) span classtitle{{ item.name }}/span !-- 关键核心三属性 -- el-dropdown triggerhover :teleportedfalse :append-todomMap.get(item.id) span classmore-btn···/span template #dropdown el-dropdown-menu el-dropdown-item编辑/el-dropdown-item el-dropdown-item删除/el-dropdown-item /el-dropdown-menu /template /el-dropdown /div /div /template script setup langts import { ref } from vue const list ref([ { id: 1, name: 测试条目1 }, { id: 2, name: 测试条目2 }, ]) // 存储每个item dom供 append-to 使用 const domMap new Mapstring, HTMLElement() /script style scoped .list-wrap { width: 300px; margin: 50px auto; } .list-item { position: relative; display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-radius: 6px; cursor: pointer; } .list-item:hover { background: #f5f7fa; } .more-btn { color: #666; padding: 0 6px; } .list-item:hover .more-btn { color: #1989fa; } /style
Element Plus el-dropdown append-to 挂载到父元素,但是不生效的问题
版本Element Plus版本号2.13.2问题现象开发中使用el-dropdown悬浮展开下拉菜单时append-to已经绑定了父元素但是el-dropdown内容依旧挂载到body元素上原因el-dropdown默认开启teleportedtrue下拉 DOM 被挂载到body。如果想要append-to生效那么需要手动设置teleportedfalse简单 Demo文件代码template div classlist-wrap div classlist-item v-foritem in list :keyitem.id :refel domMap.set(item.id, el) span classtitle{{ item.name }}/span !-- 关键核心三属性 -- el-dropdown triggerhover :teleportedfalse :append-todomMap.get(item.id) span classmore-btn···/span template #dropdown el-dropdown-menu el-dropdown-item编辑/el-dropdown-item el-dropdown-item删除/el-dropdown-item /el-dropdown-menu /template /el-dropdown /div /div /template script setup langts import { ref } from vue const list ref([ { id: 1, name: 测试条目1 }, { id: 2, name: 测试条目2 }, ]) // 存储每个item dom供 append-to 使用 const domMap new Mapstring, HTMLElement() /script style scoped .list-wrap { width: 300px; margin: 50px auto; } .list-item { position: relative; display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-radius: 6px; cursor: pointer; } .list-item:hover { background: #f5f7fa; } .more-btn { color: #666; padding: 0 6px; } .list-item:hover .more-btn { color: #1989fa; } /style