本文主要是介绍vue：使用：element 中弹框中获取table高度无效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
场景：dialog 弹框中想要获取里面table的高度，但是直接用 tableRef.value?.$el.offsetHeight 获取无效。
原因：dialog中有个弹框打开的加载动画。需要用监听 opeined 【Dialog 打开动画结束时的回调】等动画加载后然后进行高度获取
一、demo方案
在Vue 3中，您可以使用watch监听dialog组件的opened属性，并在属性变化时执行相应的操作。在watch的回调函数中，您可以使用nextTick确保在下一个DOM更新周期中获取dialog组件加载完毕后的状态。
<template><Dialog v-model="dialogVisible" @opened="handleDialogOpened"><!-- Dialog Content --></Dialog>
</template><script>
import { ref, watch, nextTick } from 'vue';export default {setup() {const dialogVisible = ref(false);const handleDialogOpened = () => {nextTick(() => {console.log('Dialog加载完毕');// 在这里执行您想要在Dialog加载完毕后执行的操作});};watch(dialogVisible, (newValue) => {if (newValue) {console.log('Dialog打开');} else {console.log('Dialog关闭');}});return {dialogVisible,handleDialogOpened};}
};
</script>二、完整代码
<Dialogv-model="dialogVisible"title="标题"@opened="handleDialogOpened"
><!-- 详情信息 --><el-table ref="tableRef" :data="list" border><el-table-column label="姓名1" prop="remark1" show-overflow-tooltip /><el-table-column label="姓名2" prop="remark2" show-overflow-tooltip /><el-table-column label="姓名3" prop="remark3" show-overflow-tooltip /></el-table>
</Dialog><script>
const dialogTitle = ref<string>('审核') // 弹框标题/** 弹窗打开 **/
const open = async (params, fileDetailList) => {console.log('弹框打开', params, fileDetailList)resetForm()dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗/** */
const handleDialogOpened = () => {nextTick(() => {console.log('Dialog加载完毕')// 在这里执行您想要在Dialog加载完毕后执行的操作handleHeight()})
}/** 动态获取高度 */
const handleHeight = () => {nextTick(() => {if (tableRef.value?.$el) {console.log('Table的高度：', tableRef.value?.$el.offsetHeight)}const windowHeight = document.documentElement.clientHeightconsole.log('当前屏幕高度', windowHeight)})
}
</script>这篇关于vue：使用：element 中弹框中获取table高度无效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
