How to calculate correct height of the table in vue

I have a table element from element-ui:

 <el-table ref="table" :height="tableHeight"> </el-table> 

And this is how I am trying to calculate the height:

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;
      }
    },

So I am getting the table element, and I am calculating the height of the view. So each row has a checkbox, and as soon as one of them is selected, the element shows 1 element selected for example. But whenever I click the last item's checkbox in the table, the scroll goes wrong and goes to the top a little bit. So I want to fix this and maybe calculate the height differently. Open any suggestions...