網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
el-table數(shù)據(jù)刷新后會(huì)重新定位至表格頭的位置,想要更新數(shù)據(jù)后任處于之前操作的位置,就要在操作時(shí)記錄下當(dāng)前表格滾動(dòng)條的位置,數(shù)據(jù)更新后設(shè)置表格位置為剛才記憶的位置。
記憶上次位置:
/**
* @description: 獲取表格滾動(dòng)條位置
* @param ifMemory 有沒有ifMemory決定了該函數(shù)是保存位置還是跳轉(zhuǎn)位置
* @return void
*/
getTableScrollTop( ifMemory = false ) {
if ( !this.$refs['elTable'] ) return //不存在這個(gè)表格則返回
let elTable = this.$refs['elTable'].$el
if ( !elTable ) return
const scrollParent = elTable.querySelector('.el-table__body-wrapper')
if ( ifMemory ) {
//保存
this.memoryScrollTop = scrollParent.scrollTop //存下當(dāng)前編輯行的ScrollTop
} else {
//跳轉(zhuǎn)
scrollParent.scrollTop = this.memoryScrollTop //跳轉(zhuǎn)到存下編輯行的ScrollTop
}
},
使操作行定位至表格最上方:
/**
* @description: 獲取表格滾動(dòng)條位置
* @param index 有沒有 index 決定了該函數(shù)是保存位置還是跳轉(zhuǎn)位置
* @return void
*/
getTableScrollTop( index ) {
if (!this.$refs['elTable']) return //不存在這個(gè)表格則返回
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 //存下當(dāng)前編輯行的ScrollTop
} else {
//跳轉(zhuǎn)
scrollParent.scrollTop = this.memoryScrollTop //跳轉(zhuǎn)到存下編輯行的ScrollTop
}
},
?表格更新后不能立即調(diào)用該函數(shù)設(shè)置表格滾動(dòng)條位置,但是借助延時(shí)函數(shù)可以解決這個(gè)問題,甚至不需要設(shè)置延時(shí)數(shù)
setTimeout(() => {
this.getTableScrollTop()
}) //不用給延遲數(shù),夠用
原文鏈接:https://blog.csdn.net/sugerinaflat/article/details/121822434
相關(guān)推薦
- 2022-03-26 C語(yǔ)言關(guān)于時(shí)間復(fù)雜度詳解_C 語(yǔ)言
- 2022-07-08 C#中的Dialog對(duì)話框_C#教程
- 2022-10-28 Templates實(shí)戰(zhàn)之更優(yōu)雅實(shí)現(xiàn)自定義View構(gòu)造方法詳解_Android
- 2022-10-19 react封裝Dialog彈框的方法_React
- 2022-10-19 Python?np.where()的詳解以及代碼應(yīng)用_python
- 2022-03-14 【錯(cuò)誤記錄/html】Response to preflight request doesn‘t p
- 2022-03-11 C語(yǔ)言中static的使用介紹_C 語(yǔ)言
- 2022-11-19 Gogs遷移
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支