網站首頁 編程語言 正文
el-table數據刷新后會重新定位至表格頭的位置,想要更新數據后任處于之前操作的位置,就要在操作時記錄下當前表格滾動條的位置,數據更新后設置表格位置為剛才記憶的位置。
記憶上次位置:
/**
* @description: 獲取表格滾動條位置
* @param ifMemory 有沒有ifMemory決定了該函數是保存位置還是跳轉位置
* @return void
*/
getTableScrollTop( ifMemory = false ) {
if ( !this.$refs['elTable'] ) return //不存在這個表格則返回
let elTable = this.$refs['elTable'].$el
if ( !elTable ) return
const scrollParent = elTable.querySelector('.el-table__body-wrapper')
if ( ifMemory ) {
//保存
this.memoryScrollTop = scrollParent.scrollTop //存下當前編輯行的ScrollTop
} else {
//跳轉
scrollParent.scrollTop = this.memoryScrollTop //跳轉到存下編輯行的ScrollTop
}
},
使操作行定位至表格最上方:
/**
* @description: 獲取表格滾動條位置
* @param index 有沒有 index 決定了該函數是保存位置還是跳轉位置
* @return void
*/
getTableScrollTop( index ) {
if (!this.$refs['elTable']) return //不存在這個表格則返回
let elTable = this.$refs['elTable'].$el
if ( !elTable ) return
const scrollParent = elTable.querySelector('.el-table__body-wrapper')
const targetTop = elTable.querySelectorAll('.el-table__body tr')[index].getBoundingClientRect().top //該行的位置
const containerTop = elTable.querySelector('.el-table__body').getBoundingClientRect().top //body的位置
if ( index ) {
//保存
this.memoryScrollTop = targetTop - containerTop //存下當前編輯行的ScrollTop
} else {
//跳轉
scrollParent.scrollTop = this.memoryScrollTop //跳轉到存下編輯行的ScrollTop
}
},
?表格更新后不能立即調用該函數設置表格滾動條位置,但是借助延時函數可以解決這個問題,甚至不需要設置延時數
setTimeout(() => {
this.getTableScrollTop()
}) //不用給延遲數,夠用
原文鏈接:https://blog.csdn.net/sugerinaflat/article/details/121822434
相關推薦
- 2023-04-01 Pytorch中關于F.normalize計算理解_python
- 2022-01-30 element-ui表格的多選框CheckBox 是否可以勾選
- 2022-04-27 python?數據挖掘算法的過程詳解_python
- 2022-08-29 Python基礎語法之變量與數據類型詳解_python
- 2022-07-19 react props的特點
- 2023-01-14 Android?ANR無響應分析解決方案_Android
- 2022-09-15 Go語言中Goroutine的設置方式_Golang
- 2023-01-15 Rust包和Crate超詳細講解_Rust語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支