el-table合计放表头

最新推荐文章于 2024-10-31 14:12:45 发布

原创最新推荐文章于 2024-10-31 14:12:45 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #elementui

Vue 专栏收录该内容

6 篇文章

订阅专栏

在Vue应用的mounted生命周期钩子中，使用$nextTick方法确保DOM更新后，执行showSummariesPosition方法。该方法通过查询DOM，找到.el-table、.el-table__footer-wrapper和.el-table__body-wrapper元素，然后重新排列它们的位置，将footer插入到body前面。

生命周期中使用

//生命周期
mounted(){
    this.$nextTick(()=>{
        this.showSummariesPosition();
    })
}

方法

//方法
showSummariesPosition(){
    let table = document.querySelector('.el-table');
    let footer = document.querySelector('.el-table__footer-wrapper');
    let body = document.querySelector('.el-table__body-wrapper');
    table.removeChild(footer);
    table.insertBefore(footer,body);
}