株洲网站建设报价方案_免费cms系统php_百度seo咋做_备案查询站长工具

弹窗里要放一个table表格，表格高度跟随弹窗高度的变化而变化。

代码如下：

<template><el-dialog ref="lookDialogRef" v-model="dialogLook.visible" :title="dialogLook.title" width="1000px" append-to-body @close="closeDialog" @open="openDialog"><el-table :data="tableData" :height="dialogHeight"><el-table-column v-if="true" label="编号" align="center" prop="code" /><el-table-column v-if="true" label="姓名" align="center" prop="name" /><el-table-column v-if="true" label="年龄" align="center" prop="age" /></el-table></el-dialog>
</template><script setup lang="ts">
const dialogHeight = ref('200px')
const lookDialogRef = ref(null)
const lookDialog = () => {console.log(lookDialogRef.value.$el.querySelector('.el-dialog__body'))
}
onMounted(() => {window.onresize = () => {dialogLook.visible && lookDialog()}
})
</script>

报错如下：

原因：写法有问题。

//少写了一个dialogContentRef
console.log(lookDialogRef.value.dialogContentRef.$el.querySelector('.el-dialog__body'))

知识点：
‌ElementPlus中的dialogContentRef是一个引用（ref），用于获取`el-dialog组件内部的具体DOM元素，特别是对话框的内容区域。‌

在ElementPlus中，el-dialog组件提供了dialogContentRef属性，通过这个属性可以获取到对话框内容的DOM元素。这在进行一些自定义操作时非常有用，比如动态设置对话框内容的高度、宽度或者进行其他DOM操作。

最终代码：（获取元素可视高度）

<template><el-dialog ref="lookDialogRef" v-model="dialogLook.visible" :title="dialogLook.title" width="1000px" append-to-body @close="closeDialog" @open="openDialog"><el-table :data="tableData" :height="tableHeight"><el-table-column v-if="true" label="编号" align="center" prop="code" /><el-table-column v-if="true" label="姓名" align="center" prop="name" /><el-table-column v-if="true" label="年龄" align="center" prop="age" /></el-table></el-dialog>
</template><script setup lang="ts">
const tableHeight = ref('200px')
const lookDialogRef = ref(null)
const openDialog = () => {nextTick(() => {let h = lookDialogRef.value.dialogContentRef.$el.querySelector('.el-dialog__body').clientHeight - 130tableHeight.value = h + 'px'})
}
onMounted(() => {window.onresize = () => {dialogLook.visible && openDialog()}
})
</script>

注：

// 获取实际高度（包括padding和border）
const actualHeight = element.offsetHeight;// 获取可视高度（不包括滚动条）
const visualHeight = element.clientHeight;