<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
相关推荐
Nan_Shu_6148 分钟前
学习:SassWYiQIU44 分钟前
面了一次字节前端岗,我才知道何为“造火箭”的极致!qq_3168377544 分钟前
uniapp 观察列表每个元素的曝光时间小夏同学呀1 小时前
在 Vue 2 中实现 “点击下载条码 → 打开新窗口预览 → 自动唤起浏览器打印” 的功能芳草萋萋鹦鹉洲哦1 小时前
【vue】导航栏变动后刷新router的几种方法zero13_小葵司1 小时前
JavaScript性能优化系列(八)弱网环境体验优化 - 8.3 数据预加载与缓存:提前缓存关键数据1***y1781 小时前
Vue项目性能优化案例Irene19911 小时前
FileList 对象总结(附:不支持迭代的类数组对象表)谢尔登1 小时前
【CSS】样式隔离百***58842 小时前
Redis 通用命令