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

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

分析:其实el-table一共分为三部分:el-table__header-wrapperel-table__body-wrapperel-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中绑定监听事件

java 复制代码
<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 = () => {
  if (!tableFooterBody) return;
  const scrollLeft = tableFooterBody.scrollLeft;
  const tableHeaderBody = multipleTableRef.value?.$el.querySelector('.el-table__header-wrapper') as HTMLElement;
  const tableBodyScrollbar = multipleTableRef.value?.$el.querySelector('.el-table__body-wrapper .el-scrollbar__wrap') as HTMLElement;

  if (tableHeaderBody) tableHeaderBody.scrollLeft = scrollLeft;
  if (tableBodyScrollbar) tableBodyScrollbar.scrollLeft = scrollLeft;
};

onMounted(() => {
  tableFooterBody = multipleTableRef.value?.$el.querySelector('.el-table__footer-wrapper') as HTMLElement;
  if (tableFooterBody) {
    tableFooterBody.addEventListener('scroll', syncScroll);
  }
});

// 卸载时移除事件防止内存泄漏
onUnmounted(() => {
  if (tableFooterBody) {
    tableFooterBody.removeEventListener('scroll', syncScroll);
  }
});

这里边注意因为el-table__footer-wrapper用的是el-scrollbar组件,所以 tableBody 实际上不是直接可滚动的元素,而是 el-scrollbar 里面的 .el-scrollbar__wrap 负责滚动。

相关推荐
李昊哲小课14 分钟前
HTML 完整教程与实践
前端·html
老华带你飞29 分钟前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
GISer_Jing34 分钟前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫36 分钟前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫36 分钟前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
阿智@111 小时前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
伍哥的传说1 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒1 小时前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi5201 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java1 小时前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端