elementplus根据弹窗高度设置table高度

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

代码如下：

javascript 复制代码

<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>

报错如下：

原因：写法有问题。

javascript 复制代码

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

知识点：

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

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

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

javascript 复制代码

<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 - 130
        tableHeight.value = h + 'px'
    })
}
onMounted(() => {
    window.onresize = () => {
       dialogLook.visible && openDialog()
    }
})
</script>

注：

javascript 复制代码

// 获取实际高度（包括padding和border）
const actualHeight = element.offsetHeight;

// 获取可视高度（不包括滚动条）
const visualHeight = element.clientHeight;