Vue中watch监听里计算表格高度时$el报错的解决方法

问题根源 #

你给原生<table>标签设置的ref，直接指向原生DOM元素，而非Vue组件实例——只有组件的ref才会返回带$el属性的组件实例，原生DOM元素本身不需要再取$el，直接访问this.$refs.table即可。

修正后的代码 #

<template>
  <table ref="table"></table>
</template>

<script>
export default {
  data() {
    return {
      buttonClicked: false
    }
  },
  watch: {
    buttonClicked: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          // 先校验ref是否存在，避免表格未渲染时的报错
          if (!this.$refs.table) return;
          
          const tableElement = this.$refs.table;
          const tableOffsetTop = tableElement.getBoundingClientRect().top;
          // 这里添加你的高度计算逻辑
          console.log('表格视口顶部偏移量:', tableOffsetTop);
        });
      }
    }
  }
}
</script>

额外提示 #

• 如果表格是通过v-if条件渲染的，必须确保buttonClicked触发时表格已经挂载到DOM上，否则this.$refs.table会为undefined，提前做存在性判断能避免这类报错。
• $nextTick的用法是正确的，它能保证在DOM更新完成后再执行元素获取逻辑，保留即可。

内容的提问来源于stack exchange，提问作者World's famous people