Vue + elementUI Table添加数据出现Y轴滚动条时,滚动条保持在最底部
Vue + elementUI Table添加数据出现Y轴滚动条时,滚动条保持在最底部
·
最近做的一个需求–需要给表格增加数据,数据过多的情况下会出现Y轴的滚动条,需要默认定位到表格的底部。
效果图如下:
解决方案
el-table分为两个部分
header-wrapper --〉对应表头部分
body-wrapper --〉对应表格内容部分 存在 scrollTop,scrollHeight 属性,所以可以用下面方法来实现滚动条在底部的效果(备注: 需给对应的el-table 设置ref 属性,,本案例中ref 设置为webTable)
this.$nextTick(() => {
if (this.$refs.webTable) {
this.$refs.webTable.bodyWrapper.scrollTop = this.$refs.webTable.bodyWrapper.scrollHeight;
}
})
this.$nextTick() 是为了让表格加载完再执行,不加上可能会看不到效果
参考文章:点击跳转
更多推荐
已为社区贡献1条内容
所有评论(0)