Vue中点击加载更多滚动条滚动到页面最底部

<template>
  <div>
    <div class="table-container" ref="table-container">
      <table class="table">
        <tr v-for="(row,index) in data.slice(0,page)" :key="index">
          <td>{{index}}</td>
          <td>{{row.name}}</td>
          <td>{{row.title}}</td>
        </tr>
      </table>
    </div>
    <div class="load-more" @click="loadMore">加载更多</div>
  </div>
</template>

如上是HTML部分，

js部分如下：

今天写了半天一直不能去页面底部，以前用jquery一直是这么写的，坑死了。

原来vue需要用nextTick才能去更新dom，气死了。所以各位小伙伴也要注意。免得白浪费时间。

js代码如下：

  this.$nextTick(() => {
        let tablePar = this.$refs["table-container"];
        tablePar.scrollTop = tablePar.scrollHeight;
      });