elementUI?Table?表格編輯數(shù)據(jù)后停留當(dāng)前位置的示例代碼
后臺管理系統(tǒng)在實際開發(fā)中,表格如果在一定高度出現(xiàn)滾動條。
這時如果對表格行數(shù)據(jù)進(jìn)行編輯或者拖拽排序操作,數(shù)據(jù)刷新后滾動條會默認(rèn)回到頂部,這樣體驗會不太好。
如果想保留在當(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: '', // 滾動條位置 elTable: this.$refs.elTable.bodyWrapper, // 獲取table表格父級的classname }; },
table表格出現(xiàn)滾動條渲染的結(jié)構(gòu)和樣式
3.點(diǎn)擊編輯時獲取當(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)文章
javascript動態(tài)創(chuàng)建表格及添加數(shù)據(jù)實例詳解
這篇文章主要介紹了javascript動態(tài)創(chuàng)建表格及添加數(shù)據(jù),以實例形式分析了javascript動態(tài)創(chuàng)建表格的常用方法,包括不兼容IE6與兼容IE6的實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下2015-05-05微信小程序6位或多位驗證碼密碼輸入框功能的實現(xiàn)代碼
這篇文章主要介紹了微信小程序6位或多位驗證碼密碼輸入框功能的實現(xiàn)代碼,實現(xiàn)思路很簡單,需要的朋友可以參考下2018-05-05javascript 實現(xiàn)父窗口引用彈出窗口的值的腳本
javascript 實現(xiàn)父窗口引用彈出窗口的值的腳本...2007-08-08JavaScript基于ChatGPT?API實現(xiàn)劃詞翻譯瀏覽器腳本
最近?GitHub?上有個基于?ChatGPT?API?的瀏覽器腳本,openai-translator,?短時間內(nèi)?star?沖到了?9.7k,拋開?tauri?是使用?rust?部分,那瀏覽器部分實現(xiàn)還是比較簡單的,今天我們就來手動實現(xiàn)一下2023-03-03