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

在后台管理系统中，抽屉（Drawer）通常从屏幕边缘滑出，覆盖部分页面。但在某些布局中，我们希望抽屉仅在某个特定区域（如卡片、面板、表格容器）内打开，避免遮挡导航、侧边栏或其他关键信息。 vxe-drawer 组件提供了 transfer、append-to 和 is-within-append-to 三个配置项，组合使用即可将抽屉精准挂载到任意指定的 DOM 元素内。同时，配合 vxe-grid 的 height: '100%'，可实现表格自适应抽屉的宽高，达到内容与容器完美融合的效果。

属性说明

属性	类型	默认值	说明
transfer	boolean	false	是否将抽屉渲染到 body 下（脱离父级样式影响）。若需挂载到指定元素，必须设置为 true。
append-to	string / HTMLElement	---	指定挂载的目标容器（CSS 选择器或 DOM 元素）。抽屉将被渲染到该容器内部。
is-within-append-to	boolean	false	是否将抽屉的定位限制在 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）作为定位参考。

代码

html 复制代码

<template>
  <div>
    <vxe-radio-group v-model="position">
      <vxe-radio-button checked-value="top" content="上"></vxe-radio-button>
      <vxe-radio-button checked-value="bottom" content="下"></vxe-radio-button>
      <vxe-radio-button checked-value="left" content="左"></vxe-radio-button>
      <vxe-radio-button checked-value="right" content="右"></vxe-radio-button>
    </vxe-radio-group>
    <div>
      <vxe-button status="primary" content="点击弹出" @click="showPopup = true"></vxe-button>
    </div>

    <vxe-drawer
      v-model="showPopup"
      transfer
      is-within-append-to
      mask-closable
      resize
      width="400"
      height="300"
      append-to=".my-drawer-within-demo2-wrapper"
      :position="position"
    >
      <template #default>
        <vxe-grid v-bind="gridOptions"></vxe-grid>
      </template>
    </vxe-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const showPopup = ref(false)

const position = ref('right')

const gridOptions = reactive({
  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%'，可以轻松实现表格自适应容器大小。

vxeui.com