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');
  }
},
相关推荐
敲敲了个代码20 分钟前
多标签页强提醒不重复打扰:从“弹框轰炸”到“共享待处理队列”的实战
java·前端·javascript·面试·架构
不想上班只想要钱1 小时前
动态类名在 <swiper-slide 的复制项中没有起作用的解决方法
前端·vue.js
weixin_395448911 小时前
tidl_import_mul_rmfsd_psd_u8_3x480x544_bise_raw_dynamic.txt
java·服务器·前端
多多*1 小时前
图解Redis的分布式锁的历程 从单机到集群
java·开发语言·javascript·vue.js·spring·tomcat·maven
Jinuss2 小时前
源码分析之React中updateContainerImpl方法更新容器
前端·react.js·前端框架
Mr Xu_2 小时前
Vue + Element Plus 实现前端导出 Excel 功能详解
前端·javascript·vue.js
前端大波2 小时前
vue3的自动化路由(unplugin-vue-router)
javascript·vue.js·自动化
仰泳之鹅3 小时前
【杂谈】使用Edge浏览器下载文件显示“Microsoft Defender SmartScreen 已阻止此不安全文件”的解决方法
前端·edge
万邦科技Lafite3 小时前
小红书评论数据一键获取,item_reviewAPI接口讲解
大数据·前端·数据库·chrome·电商开放平台
戌中横3 小时前
JavaScript 对象
java·开发语言·javascript