<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');
}
},
elment Table多级表头固定列后,合计行错位显示问题解决
晴空万里藏片云2025-02-24 1:37
相关推荐
vvilkim8 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践天天扭码12 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?姑苏洛言21 分钟前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案Passerby_K21 分钟前
vue3+dhtmlx 甘特图真是案例佳腾_27 分钟前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效三巧1 小时前
纯CSS吃豆人(JS仅控制进度)SummerGao.1 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码天天扭码2 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)