如何计算VUE中的表高

rsl1atfo 于 2022-12-19 发布在 Vue.js

关注(0)|答案(1)|浏览(115)

我有一张table，我给它一个参考。

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

我想在watcher中计算这个表的高度：

watch: {

   buttonClicked: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          const tableElement = this.$refs.table.$el;
          const tableOffsetTop = tableElement.getBoundingClientRect().top;
        });
      },
    },
}

但我得到一个错误：未捕获的类型错误：无法读取未定义的属性（读取"$el"）
我试着用这个. $nexttick来修复它，但是这次我不能计算正确。
我该怎么修呢？

vue.js

来源：https://stackoverflow.com/questions/74825629/how-to-calculate-table-height-in-watch-in-vue

1条答案

按热度按时间

gj3fmq9x1#

尝试不使用$el：

const app = Vue.createApp({
  data() {
    return {
       height: null
    }
  },
  watch: {
   buttonClicked: {
      handler() {
        this.$nextTick(() => {
          const tableElement = this.$refs.table;
          const tableOffsetTop = tableElement.getBoundingClientRect().top;
          this.height = tableElement.getBoundingClientRect().bottom -tableElement.getBoundingClientRect().top
        });
      },
      immediate: true,
    },
}
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <table ref="table"><tr><td>table</td></tr></table>
  height: {{ height }}
</div>

赞(0）回复(0）举报 2022-12-19

我来回答

如何计算VUE中的表高

1条答案

相关问题

热门标签

最新问答