添加新项目时滚动到固定高度的表格底部

Question

我有一个函数，可以将新项目添加到高度固定并设置为overflow: auto的表中。 当向表中添加新项目时，滚动应该立即转到表的底部，但是当前它不这样做。看来我需要再次按下才能使其移至底部。

 showMore() {
   this.itemsToShow = this.itemsToShow + 6
   var table = this.$refs['list'];
   table.$el.scrollTop = table.$el.scrollHeight 
 },

这里是显示此行为的codepen，https://codepen.io/pokepim/pen/XWKqBrv项已添加到表中，但滚动不会移到底部。再次单击该按钮可移动滚动条，但这不是您想要的行为（因为添加新项目时应同时移动滚动条）

Answer 1

在nextTick上执行该操作

showMore() {
  this.itemsToShow = this.itemsToShow + 6
  var table = this.$refs['list'];

  this.$nextTick(() => {
    table.$el.scrollTop = table.$el.scrollHeight
  }) 
}