vue：使用：element 中弹框中获取table高度无效

场景：dialog 弹框中想要获取里面table的高度，但是直接用 tableRef.value?.$el.offsetHeight 获取无效。

原因：dialog中有个弹框打开的加载动画。需要用监听 opeined 【Dialog 打开动画结束时的回调】等动画加载后然后进行高度获取

一、demo方案

在Vue 3中，您可以使用watch监听dialog组件的opened属性，并在属性变化时执行相应的操作。在watch的回调函数中，您可以使用nextTick确保在下一个DOM更新周期中获取dialog组件加载完毕后的状态。

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

二、完整代码

<Dialog
    v-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('审核') // 弹框标题
 
/** 弹窗打开 **/
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.clientHeight
    console.log('当前屏幕高度', windowHeight)
  })
}
script>