elementUI Table 表格编辑数据后停留当前位置

所属分类：Web前端

摘要

后台管理系统在实际开发中，表格如果在一定高度出现滚动条。这时如果对表格行数据进行编辑或者拖拽排序操作，数据刷新后滚动条会默认回到顶部，这样体验会不太好。

后台管理系统在实际开发中，表格如果在一定高度出现滚动条。

这时如果对表格行数据进行编辑或者拖拽排序操作，数据刷新后滚动条会默认回到顶部，这样体验会不太好。

如果想保留在当前位置可以这样操作：

<el-table :data="tableData" v-loading="tableLoading" ref="elTable"></el-table>

  data() {     return {       scrollTop: '', // 滚动条位置       elTable: this.$refs.elTable.bodyWrapper, // 获取table表格父级的classname     };   },

table表格出现滚动条渲染的结构和样式

elementUI Table 表格编辑数据后停留当前位置

this.scrollTop = this.elTable.scrollTop;

setTimeout(() => {   $(this.elTable).scrollTop(this.memoryScrollTop) // JQ写法 })