vue elment-ui table组件滚动条位置 和vxe-table 的table组件滚动条位置

1. 先说elment-ui table组件滚动条位置

element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题

滚动到第一行：
this.$refs.table.bodyWrapper.scrollTop =0;
滚动到最后一行：
this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight;

改成：

this.$nextTick(() => {
  let scrollHeight = this.$refs.table.bodyWrapper.scrollHeight
  this.$refs.table.bodyWrapper.scrollTop = scrollHeight
})

分析：bodyWrapper.scrollHeight等于1256，max-height是659，所以一般设置成1256-659=597就能保证滚动条滚动到底部

2.vxe-table 的table组件滚动条位置

先上效果图：

 分析：

下面的方法存在问题, 这么处理scroll事件会导致滚动条不受控制,始终在底部！原回答仅供参考!!!

我也发现scrollTo、scrollToRow等api不太好使，临时试验的方法：绑定vxe-table的scroll事件

<vxe-table
  ref="xTable"      
  @scroll="onScroll"
>
 onScroll() {
  // 参考: 滚动条滚动到底部
  // https://blog.csdn.net/a2398936046/article/details/83864561
  const el = this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper')
  if (el) {
    el.scrollTop = el.scrollHeight
  }
}

新的解决方法: 使用clearScroll()方法, 返回的是一个Promise对象, 在then里处理滚动到指定位置的逻辑

that.$refs.xTable.clearScroll().then(() => {
       that.scrollDown()
})

scrollDown() {
      const el = this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper')
      if (el) {
        el.scrollTop = el.scrollHeight
      }
}

正确的方法：

this.$refs.xTable.scrollTo(0, 3500)

第二个值 3500  可以动态计算，并且你的列表指定到哪一行被选中同时，滚动条动态滚动到这条数据的位置。并且这条数据的某列的状态有且仅有1个才能实现。

以我的效果图为例子：当前列表是 主要事件的数据 只有一条 ，在table数据的里面for循环找到这个数据的索引，然后 * 每行数据的高度。比喻：this.tableData[i] *36 就可以动态替换了 3500.

最后给一个选中索引的那行的方法：

this.$refs.xTable1.setCurrentRow(this.tableDataMap[i])