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

news/2024/12/21 3:00:40/

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

注:

javascript">// 获取实际高度(包括padding和border)
const actualHeight = element.offsetHeight;// 获取可视高度(不包括滚动条)
const visualHeight = element.clientHeight;

http://www.ppmy.cn/news/1556804.html

相关文章

趣味编程:猜数字小游戏

1.猜数字小游戏概述 在我们的童年生活中&#xff0c;总是伴随着欢乐&#xff0c;是与小伙伴们一起玩游戏&#xff0c;其中最经典小游戏就是猜数字小游戏&#xff08;又称为数字炸弹&#xff09;。 猜数字小游戏的实现其实非常的简单&#xff0c;我们需要实现的猜数字一共有三…

电子科技大学考研,计算机与软件专业怎么选择?

电子科技大学在计算机与软件领域具备卓越实力&#xff0c;其毕业生就业前景及薪资水平均颇为可观。因此&#xff0c;学生应依据个人课程专长来选定专业。若各项课程均表现出色&#xff0c;推荐25届考生优先考虑软件专业&#xff0c;因其上岸难度相对较低。 接下来&#xff0c;C…

C++手动实现一个HashMap

1.HashMap原理 参考我的博客&#xff1a;https://blog.csdn.net/Revendell/article/details/110009858 开链法&#xff1a;STL的hashtable便是采用开链法解决冲突。这种做法是在每一个表格元素中维护一个list&#xff1a;散列函数为我们分配某一个list&#xff0c;然后我们在…

商用密码标准实现

文章目录 商用密码标准实现简述 GM/T0009 4种数据转换的功能&#xff0c;根据你的理解&#xff0c;每种转换功能给出至少一个例子参考课程代码sdfproject&#xff0c;基于一个模块utils.c&#xff0c;utils.h使用四个函数分别实现4种数据转换的功能src中在testsdf.c中编写main函…

大数据:开启智能时代的钥匙

目录 一、什么是大数据&#xff1f; 二、大数据的应用领域 三、大数据面临的挑战 四、大数据的未来展望 在当今数字化浪潮汹涌澎湃的时代&#xff0c;大数据已然成为了一颗璀璨夺目的明星&#xff0c;其热度持续攀升&#xff0c;几乎渗透到了社会的每一个角落&#xff0c;宛…

STM32F407ZGT6-UCOSIII笔记11:任务内建消息队列

任务内建消息队列简化了外部定义的代码&#xff0c;而且也比外部消息队列更有效 本文学习与程序编写基于 正点原子的 STM32F1 UCOS开发手册 文章提供测试代码讲解、完整工程下载、测试效果图 这次设计的实验在启动方面 还是有瑕疵的&#xff0c;但不影响观察效果&#xff1a…

Docker安装及基本使用

介绍 Docker于2013年首次发布&#xff0c;由Docker, Inc开发。‌‌Docker是一种用于构建、发布及运行应用程序的开源项目&#xff0c;它基于操作系统层级的虚拟化技术&#xff0c;将软件与其依赖项打包为容器‌。Docker的核心概念是“容器”&#xff08;Container&#xff09;…

长沙家具叠影床,让生活浸染自由浪漫

在繁华都市的喧嚣中&#xff0c;长沙铂乐家具叠影床宛如一方宁静的港湾&#xff0c;悄然静卧于家居空间。它以独特的设计语言&#xff0c;诉说着自由与浪漫的故事。 汲取世间万物之美&#xff0c;实现人与家具的美好互动&#xff0c;铂乐家具叠影床以光影交错为灵感&#xff0…