elment Table多级表头固定列后,合计行错位显示问题解决

复制代码
<el-table-column :label="tabsDataFilters1.orgName" width="370" :fixed="tableFixed">
  <el-table-column type="index" label="序号" width="50" align="center" :fixed="tableFixed"></el-table-column>
  <el-table-column prop="name" label="姓名" width="200" align="left" :fixed="tableFixed"></el-table-column>
  <el-table-column prop="age" :formatter="formatAmount" label="小计" width="120" align="center" :fixed="tableFixed"></el-table-column>
</el-table-column>

mounted进行监听,监听方法如下:

observeClassChanges() {
  debugger
  this.$nextTick(() => {
    const bodyWrapper = this.$refs.table1.$el.querySelector('.el-table__body-wrapper');
    if (!bodyWrapper) return;

    // 创建 MutationObserver 监听 class 变化
    this.observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.attributeName === 'class') {
          this.removeScrollingClasses(bodyWrapper);
        }
      }
    });

    // 监听 `class` 变化
    this.observer.observe(bodyWrapper, {
      attributes: true,
      attributeFilter: ['class'],
    });

    // 初始移除 class,防止渲染时已有
    this.removeScrollingClasses(bodyWrapper);
  });
},
// 滚动中间行样式移除
removeScrollingClasses(bodyWrapper) {
  if (bodyWrapper.classList.contains('is-scrolling-middle')) {
    bodyWrapper.classList.remove('is-scrolling-middle');
  }
  if (bodyWrapper.classList.contains('is-scrolling-left')) {
    bodyWrapper.classList.remove('is-scrolling-left');
  }
},
相关推荐
小桥风满袖11 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
云舟吖19 分钟前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户94818176754422 分钟前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明25 分钟前
vue双向数据绑定失效
前端
bug_kada28 分钟前
前端路由:深入理解History模式
前端·面试
LIUENG29 分钟前
快速开发一个 VSCode 插件
前端·visual studio code
bug_kada30 分钟前
前端路由:Hash vs History,一篇讲明白!
前端·面试
城中的雾30 分钟前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
李明卫杭州33 分钟前
CSS 中 nth-child 选择器的详细用法和示例
前端
会豪33 分钟前
CSS 动画属性精讲:从基础到实战
前端·css