elementUI?Table?表格編輯數(shù)據(jù)后停留當(dāng)前位置的示例代碼
后臺(tái)管理系統(tǒng)在實(shí)際開發(fā)中,表格如果在一定高度出現(xiàn)滾動(dòng)條。
這時(shí)如果對(duì)表格行數(shù)據(jù)進(jìn)行編輯或者拖拽排序操作,數(shù)據(jù)刷新后滾動(dòng)條會(huì)默認(rèn)回到頂部,這樣體驗(yàn)會(huì)不太好。
如果想保留在當(dāng)前位置可以這樣操作:
1.el-table標(biāo)簽添加ref屬性
<el-table :data="tableData" v-loading="tableLoading" ref="elTable"></el-table>
2.data return定義下列值
data() { return { scrollTop: '', // 滾動(dòng)條位置 elTable: this.$refs.elTable.bodyWrapper, // 獲取table表格父級(jí)的classname }; },
table表格出現(xiàn)滾動(dòng)條渲染的結(jié)構(gòu)和樣式
3.點(diǎn)擊編輯時(shí)獲取當(dāng)前表格滾動(dòng)條位置
this.scrollTop = this.elTable.scrollTop;
4.表格數(shù)據(jù)刷新完成后
setTimeout(() => { $(this.elTable).scrollTop(this.memoryScrollTop) // JQ寫法 })
到此這篇關(guān)于elementUI Table 表格編輯數(shù)據(jù)后停留當(dāng)前位置的示例代碼的文章就介紹到這了,更多相關(guān)elementUI Table 表格編輯數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中可能會(huì)常用到的一些數(shù)據(jù)處理方法
這篇文章主要給大家介紹了JS中可能會(huì)常用到的一些數(shù)據(jù)處理方法,好多知識(shí)寫下來也能加深一下自身的記憶,文中給出了詳細(xì)的實(shí)例代碼,對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09javascript動(dòng)態(tài)創(chuàng)建表格及添加數(shù)據(jù)實(shí)例詳解
這篇文章主要介紹了javascript動(dòng)態(tài)創(chuàng)建表格及添加數(shù)據(jù),以實(shí)例形式分析了javascript動(dòng)態(tài)創(chuàng)建表格的常用方法,包括不兼容IE6與兼容IE6的實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼,實(shí)現(xiàn)思路很簡單,需要的朋友可以參考下2018-05-05javascript 實(shí)現(xiàn)父窗口引用彈出窗口的值的腳本
javascript 實(shí)現(xiàn)父窗口引用彈出窗口的值的腳本...2007-08-08JavaScript基于ChatGPT?API實(shí)現(xiàn)劃詞翻譯瀏覽器腳本
最近?GitHub?上有個(gè)基于?ChatGPT?API?的瀏覽器腳本,openai-translator,?短時(shí)間內(nèi)?star?沖到了?9.7k,拋開?tauri?是使用?rust?部分,那瀏覽器部分實(shí)現(xiàn)還是比較簡單的,今天我們就來手動(dòng)實(shí)現(xiàn)一下2023-03-03JS實(shí)現(xiàn)的走迷宮小游戲完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的走迷宮小游戲,涉及javascript鍵盤事件響應(yīng)及頁面元素動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07