elementUI?Table表格編輯數(shù)據(jù)后停留當(dāng)前位置怎么操作

這篇文章主要介紹了elementUI Table表格編輯數(shù)據(jù)后停留當(dāng)前位置怎么操作的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇elementUI Table表格編輯數(shù)據(jù)后停留當(dāng)前位置怎么操作文章都會(huì)有所收獲，下面我們一起來看看吧。

后臺(tái)管理系統(tǒng)在實(shí)際開發(fā)中，表格如果在一定高度出現(xiàn)滾動(dòng)條。

這時(shí)如果對表格行數(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)前位置怎么操作”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“elementUI Table表格編輯數(shù)據(jù)后停留當(dāng)前位置怎么操作”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。