test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

styles: Table开启固定列时表头高度不一致问题 (#6150)

Browse Source
This commit is contained in:
RUNZE LU 2023-02-13 17:16:22 +08:00 committed by GitHub
parent 4de3201595
commit 99f61f0a51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/amis/src/renderers/Table/index.tsx
View File

@ -1264,6 +1264,9 @@ export default class Table extends React.Component<TableProps, object> {
const dom = findDOMNode(this) as HTMLElement;
const fixedLeft = dom.querySelectorAll(`.${ns}Table-fixedLeft`);
const fixedRight = dom.querySelectorAll(`.${ns}Table-fixedRight`);
const theadHeight = outter
.querySelector('thead>tr')
?.getBoundingClientRect()?.height;
if (scrollLeft !== this.lastScrollLeft) {
this.lastScrollLeft = scrollLeft;
@ -1277,6 +1280,14 @@ export default class Table extends React.Component<TableProps, object> {
if (fixedLeft && fixedLeft.length) {
for (let i = 0, len = fixedLeft.length; i < len; i++) {
let node = fixedLeft[i];
// 同步thead高度
forEach(node.querySelectorAll('thead>tr>th'), (item: HTMLElement) => {
if (theadHeight) {
item.style.height = `${theadHeight}px`;
}
});
leading ? node.classList.remove('in') : node.classList.add('in');
}
}
@ -1284,6 +1295,13 @@ export default class Table extends React.Component<TableProps, object> {
if (fixedRight && fixedRight.length) {
for (let i = 0, len = fixedRight.length; i < len; i++) {
let node = fixedRight[i];
// 同步thead高度
forEach(node.querySelectorAll('thead>tr>th'), (item: HTMLElement) => {
if (theadHeight) {
item.style.height = `${theadHeight}px`;
}
});
trailing ? node.classList.remove('in') : node.classList.add('in');
}
}
@ -2370,10 +2388,11 @@ export default class Table extends React.Component<TableProps, object> {
<tbody>
<tr className={cx('Table-placeholder')}>
<td colSpan={columns.length}>
{render(
{/* 表格主体已经有placeholder，固定列再展示重复了 */}
{/* {render(
'placeholder',
translate(placeholder || 'placeholder.noData')
)}
)} */}
</td>
</tr>
</tbody>