Element UI ——table 動態添加數據滾動條一直處於最下方


代碼:

// 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM