vue 抽屉组件挂载到指定元素内显示,，表格自适应弹窗宽高-北京尧图网络

在后台管理系统中抽屉Drawer通常从屏幕边缘滑出覆盖部分页面。但在某些布局中我们希望抽屉仅在某个特定区域如卡片、面板、表格容器内打开避免遮挡导航、侧边栏或其他关键信息。vxe-drawer 组件提供了 transfer、append-to 和 is-within-append-to 三个配置项组合使用即可将抽屉精准挂载到任意指定的 DOM 元素内。同时配合 vxe-grid 的 height: ‘100%’可实现表格自适应抽屉的宽高达到内容与容器完美融合的效果。属性说明属性类型默认值说明transferbooleanfalse是否将抽屉渲染到 body 下脱离父级样式影响。若需挂载到指定元素必须设置为 true。append-tostring / HTMLElement—指定挂载的目标容器CSS 选择器或 DOM 元素。抽屉将被渲染到该容器内部。is-within-append-tobooleanfalse是否将抽屉的定位限制在 append-to 指定的容器内部即抽屉的 position: absolute 相对于该容器。transfer: true 是开启挂载的基础。append-to 指向目标容器。is-within-append-to 控制定位坐标系若为 true抽屉的偏移量相对于容器若为 false则相对于视口。使用前提append-to 指定的目标容器必须在组件渲染之前已存在于 DOM 中。因此容器不能使用 v-if建议用 v-show 或始终存在并且通常需要设置 position: relative或 absolute/fixed作为定位参考。代码templatedivvxe-radio-groupv-modelpositionvxe-radio-buttonchecked-valuetopcontent上/vxe-radio-buttonvxe-radio-buttonchecked-valuebottomcontent下/vxe-radio-buttonvxe-radio-buttonchecked-valueleftcontent左/vxe-radio-buttonvxe-radio-buttonchecked-valuerightcontent右/vxe-radio-button/vxe-radio-groupdivvxe-buttonstatusprimarycontent点击弹出clickshowPopup true/vxe-button/divvxe-drawerv-modelshowPopuptransferis-within-append-tomask-closableresizewidth400height300append-to.my-drawer-within-demo2-wrapper:positionpositiontemplate#defaultvxe-gridv-bindgridOptions/vxe-grid/template/vxe-drawer/div/templatescriptsetupimport{ref,reactive}fromvueconstshowPopupref(false)constpositionref(right)constgridOptionsreactive({showFooter:true,border:true,height:100%,columns:[{field:seq,type:seq,width:70},{field:name,title:Name},{field:sex,title:Sex},{field:address,title:Address}],data:[{id:10001,name:Test1,role:Develop,sex:Man,age:28,address:test abc},{id:10002,name:Test2,role:Test,sex:Women,age:22,address:shenzhen},{id:10003,name:Test3,role:PM,sex:Man,age:32,address:Shanghai},{id:10004,name:Test4,role:Develop,sex:Women,age:24,address:Shanghai},{id:10005,name:Test5,role:Develop,sex:Man,age:39,address:shenzhen},{id:10006,name:Test6,role:Designer,sex:Man,age:42,address:shenzhen},{id:10007,name:Test7,role:PM,sex:Man,age:48,address:Shanghai},{id:10008,name:Test8,role:Test,sex:Women,age:38,address:test abc},{id:10009,name:Test9,role:Develop,sex:Man,age:52,address:test abc},{id:100010,name:Test10,role:Develop,sex:Women,age:47,address:shenzhen},{id:100011,name:Test11,role:PM,sex:Man,age:33,address:Shanghai},{id:100012,name:Test12,role:Test,sex:Women,age:35,address:shenzhen}],footerData:[{seq:合计,name:777,sex:333,age:111}]})/script打开抽屉后抽屉从指定方向滑出但被限制在虚线框容器内不会覆盖页面其他区域。内部表格自动填满抽屉内容区宽高随抽屉尺寸变化。关键配置表格自适应在抽屉中嵌入 vxe-grid 时设置 height: ‘100%’ 可以让表格自动填满父容器高度前提是抽屉的 height 已指定。宽度默认即填满抽屉宽度无需额外设置。方向与尺寸当 position 为 left 或 right 时抽屉宽度由 width 控制高度自动填满容器受 is-within-append-to 限制。当 position 为 top 或 bottom 时抽屉高度由 height 控制宽度自动填满容器。vxe-drawer 通过 transfer append-to is-within-append-to 的组合提供了灵活的区域挂载能力使抽屉可以精准地出现在指定容器内。配合 vxe-grid 的 height: ‘100%’可以轻松实现表格自适应容器大小。https://vxeui.com

vue 抽屉组件挂载到指定元素内显示,，表格自适应弹窗宽高

相关推荐

gitee码云删除仓库教程

STM32F407VET6深度解析：性能、选型与实战项目指南

Jetson Orin Nano 2边缘AI部署实战：从TensorRT优化到实体机器人控制

更多资讯

快速排序算法原理与实现详解

Vibe Coding：编程中的多感官体验设计与实现

智能体技能(Agent Skills)架构设计与开发实践

微信校园服务平台架构设计与高并发优化实践

网易前端实训营：全栈项目实战与高并发优化

2025年Data Agent技术演进与行业应用解析

今日更新

多智能体协作系统架构设计与实践优化

大模型系统性入门实战指南：从原理到部署微调的全链路路线

鸿蒙文件系统沙箱机制解析与开发实践

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？