如何在vue中計算表格的正確高度

Question

我有一個來自 element-ui 的表格元素：

 <el-table ref="table"> </el-table> 

這就是我試圖計算高度的方式：

calculateTableHeight() {
      if (!this.$refs.table) {
        return;
      }

      const tableElement = this.$refs.table.$el;
      const viewportHeight = window.innerHeight;
      const tableOffsetTop = tableElement.getBoundingClientRect().top;
      const bottomPadding = 30;

      this.tableHeight = viewportHeight - tableOffsetTop - bottomPadding;

      if (tableOffsetTop > viewportHeight / 2) {
        this.tableHeight = viewportHeight / 2;
      }
    },

所以我得到了表格元素，我正在計算視圖的高度。 因此，每一行都有一個復選框，一旦選中其中一個，該元素就會顯示例如1 element selected 。 但是每當我單擊表格中最后一項的復選框時，滾動就會出錯並稍微移到頂部。 所以我想解決這個問題，也許以不同的方式計算高度。 打開任何建議...

Answer 1

在這里假設您正在使用Element+ ？

您是否嘗試將元素+表格的高度設置為可用視口高度的 50%？ 沒有解釋你的最終目標......

假設，您應該能夠簡單地將視圖高度設置為 50：

<el-table height="50vh" style="width: 100%">

vh = 視口高度