解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方

最新推荐文章于 2025-08-28 18:52:50 发布

原创

最新推荐文章于 2025-08-28 18:52:50 发布 · 688 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

需求：如何在el-table使用合计功能时让横向滚动条显示在最下方

分析:其实el-table一共分为三部分：el-table__header-wrapper、el-table__body-wrapper和el-table__footer-wrapper 滚动条是一直显示在el-table__body-wrapper上的我们只需要把放在el-table__body-wrapper上的滚动条显示在el-table__footer-wrapper上再开启滚动监听就可以了

1、先隐藏原本的滚动条并将合计的滚动条打开：

:deep(.el-table__body-wrapper .el-scrollbar__bar) {

display: none !important;

}

:deep(.el-table__footer-wrapper) {

overflow: auto;

}

2、监听el-table__footer-wrapper的滚动

在onMounted中绑定监听事件

<el-table v-loading="loading"
  :data="tableData"
  :row-key="rowKey"
  show-summary
  border
  ref="multipleTableRef"></el-table>

const multipleTableRef: any = ref<HTMLElement | null>(null);

let tableFooterBody: HTMLElement | null = null;
const syncScroll