滚动条设置到底部

[AntzyMo]

（必填）请填写问题描述 Describe

点击添加按钮 在最下面新增一条数据 如何设置滚动条定位到底部, scrollTo也不行 ?

（必填）请填写能重现问题的链接，例如（jsfiddle、codesandbox、jsrun） Reproduction link

?

请填写报错信息或截图 Error message or screenshots

?

（必填）请填写版本号 Version

• os: ?
• browser: ?
• vue: 2.6.10
• vxe-table: 2.9.2

[danel996]

UPDATED: 下面的方法存在问题, 这么处理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
  }
}

[danel996]

新的解决方法: 使用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
      }
}

[Hazelwu2]

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

[jovenshao]

that.$refs.xTable.loadData(data).then(_ => { that.$refs.xTable.scrollToRow(row, 'name'); } 这样就可以了

[maxsyst]

新的解决方法: 使用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
      }
}

请问有什么好办法判定它已经滑动到底部了？ 然后捆绑一个事件处理逻辑？我想实现大量数据平滑加载的逻辑。

[UnicornXU]

新的解决方法: 使用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
      }
}

大佬来个Demo 我试了你的方法,还是没法定位

[Hazelwu2]

試試這篇吧 Vxe-Table 保存滾動捲軸的位置 https://22mm-docusaurus.vercel.app/docs/Vue/vxe-table-scroll

[xieerduos]

这个代码生效了

let timeoutIds = [];
const multipleTableRef = ref();
const tableData = ref([]);
async function onScrollToRow(row) {
    if (!row) {
      multipleTableRef.value?.clearScroll();
    }
    const index = (row?.id && tableData.value.findIndex((item) => item.id=== row?.id)) || 0;
  
    const update = () => {
      multipleTableRef.value?.scrollToRow(tableData.value[index]).catch((err) => {
        console.log(`tableData[${index}]` + 'err', err);
      });
    };
  
    timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
  
    const timeArray = [0, 10, 50, 100, 150, 200, 250, 300];
    timeoutIds = timeArray.map((time) => setTimeout(update, time));
}

[zhangyuanliang]

加一个setTimeout就行了

this.invoiceTableOptions.data.push(newRecord)
(() => {
  his.$refs.invoiceTableRef.scrollToRow(newRecord, 'invoiceNo')
})