table左右fix后内容table和固定table出现错位
看代码：
// html
// <a-table
id="exampleTable"
...
> </a-table>
// js
// 延迟避免table自身的自适应高度
setTimeout(() => {
// 获取指定
let scrollDoms = document.querySelectorAll('#exampleTable .ant-table-scroll [data-row-key]');
if(scrollDoms.length == 0) {
return;
}
let mapScrollH = {};
scrollDoms.forEach(item => {
// 获取offsetHeight会自动四舍五入，需要处理精度问题
// mapScrollH[item.getAttribute('data-row-key')] = item.offsetHeight;
// 方法一: window.getComputedStyle(item)
// 方法二：item.getBoundingClientRect();
let rect = item.getBoundingClientRect();
if(rect) {
mapScrollH[item.getAttribute('data-row-key')] = rect.height + 'px';
}else {
mapScrollH[item.getAttribute('data-row-key')] = window.getComputedStyle(item).height;
}
});
// 设置左侧固定列高度
let leftFixedDoms = document.querySelectorAll(tableSelector + ' .ant-table-fixed-left [data-row-key]')
leftFixedDoms.forEach(item => {
if(mapScrollH.hasOwnProperty(item.getAttribute('data-row-key'))) {
item.style.height = mapScrollH[item.getAttribute('data-row-key')];
}
});
// 设置右侧固定列高度
let rightFixedDoms = document.querySelectorAll(tableSelector + ' .ant-table-fixed-right [data-row-key]')
rightFixedDoms.forEach(item => {
if(mapScrollH.hasOwnProperty(item.getAttribute('data-row-key'))) {
item.style.height = mapScrollH[item.getAttribute('data-row-key')];
}
});
}, 200)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
上次更新: 2025/09/05, 8:09:00