代碼:
// table表格 <el-table ref="TestTable" :data="DataList"> <el-table-column prop="no" label="序號" width="80"></el-table-column> </el-table> // 獲取數據 queryStudent() { getStudent().then((response) => { const tempList = this.DataList; this.DataList = tempList.concat(response.data.List); this.$nextTick(()=>{ this.$refs.TestTable.bodyWrapper.scrollTop = this.$refs.DataList.bodyWrapper.scrollHeight; }) } }
原理:
el-table里有個bodyWrapper 它指向的是el-table的表格內容部分,存在 scrollTop,scrollHeight 屬性,所以可以用下面方法來實現滾動條在底部的效果
table需設置ref表格屬性,例如:TestTable
this.$nextTick() 是為了讓表格加載完再執行,不加上可能會看不到效果
如果要在不同屏幕下表格高度需要適應屏幕的話,需要用到 window.onresize 函數
window.onresize = () => { this.caseListHeight = window.innerHeight - 405; }
一般JS表格滾動條置於最下方用法(未測試)
let table = document.getElementById('id名字'); table.scrollTop = table.scrollHeight;
來源:https://blog.csdn.net/yx_cos/article/details/94589135