点击添加按钮，表格显示最后一行

靓靓的圆子

于 2022-02-22 16:27:40 发布

阅读量499

点赞数

分类专栏： element-ui 表格文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45646663/article/details/123071258

版权

element-ui 同时被 2 个专栏收录

25 篇文章

订阅专栏

表格

13 篇文章

订阅专栏

这篇博客主要介绍了如何在Vue中监听表格数据`DrugList`的变化，并在数据更新后利用`$nextTick`确保DOM更新，然后设置表格滚动到底部。通过访问`$refs.editTable.bodyWrapper`来获取滚动高度并设置`scrollTop`，从而实现自动滚动到表格底部的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table :data="DrugList" ref="editTable"></el-table>

DrugList是表格的数据，监听这个数据的变化。让scrollTop=scrollHeight就可以了

watch: {
	DrugList() {
	      this.$nextTick(() => {
	        if(this.$refs.editTable){
	          console.log(5821,this.$refs.editTable.bodyWrapper.scrollHeight)
	          this.$refs.editTable.bodyWrapper.scrollTop =
	          this.$refs.editTable.bodyWrapper.scrollHeight;
	        }
	      });
	    },
}