react中获取dom元素的高度(table铺满屏幕剩余高度)

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
export const getResidueHeightByDom = () => {
  const bodyHeight = document.body.offsetHeight; // 网页可见区域高 (包括边线的高)
  const headerHeight = 64; // header高度
  const breadcrumbHeight = 36 + 16 * 2; // 面包屑高度(包括间距)
  const tabHeight = 46 + 16; // tab高度(包括间距)
  const actionHeight = (document.getElementById('action') as HTMLElement).offsetHeight; // 操作区域高度
  const actionMarginBottomHeight = 16; // 操作区域-底部外边距
  const tableHeaderHeight = 55; // table-表头高度
  const paginationHeight = 32 + 16 * 2; // 分页器高度(包括间距)
  const contentBottomPadding = 24; // content区域的底部padding
  const tabContentTopPadding = 24; // tab子元素区域上padding
  const tabContentBottomPadding = 24; // tab子元素区域下padding
  const residueHeight =
    bodyHeight -
    headerHeight -
    breadcrumbHeight -
    tabHeight -
    actionHeight -
    tableHeaderHeight -
    actionMarginBottomHeight -
    paginationHeight -
    contentBottomPadding -
    tabContentTopPadding -
    tabContentBottomPadding;
  window.console.log('Dom-residueHeight', residueHeight);
  return residueHeight;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export const getResidueHeightByDOMRect = () => {
  const bodyHeight = document.body.offsetHeight; // 网页可见区域高 (包括边线的高)
  const tableBodyTop = document
    .getElementsByClassName('ant-table-body')[0]
    .getBoundingClientRect().top; // tableBody距离顶部距离
  const paginationHeight = 32 + 16 * 2; // 分页器高度(包括间距);
  const tabContentBottomPadding = 24; // tab子元素区域下padding
  const contentBottomPadding = 24; // content区域的底部padding
  const residueHeight =
    bodyHeight - tableBodyTop - paginationHeight - contentBottomPadding - tabContentBottomPadding;
  window.console.log('DOMRect-residueHeight', residueHeight);
  return residueHeight;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export const getResidueHeightByRef = (ele: HTMLElement) => {
  const bodyHeight = document.body.offsetHeight; // 网页可见区域高 (包括边线的高)
  const tableHeaderHeight = 55; // table-表头高度
  const tableBodyTop = ele.getBoundingClientRect().top; // tableBody距离顶部距离
  const paginationHeight = 32 + 16 * 2; // 分页器高度(包括间距);
  const tabContentBottomPadding = 24; // tab子元素区域下padding
  const contentBottomPadding = 24; // content区域的底部padding
  const residueHeight =
    bodyHeight -
    tableHeaderHeight -
    tableBodyTop -
    paginationHeight -
    contentBottomPadding -
    tabContentBottomPadding;
  window.console.log('Ref-residueHeight', residueHeight);
  return residueHeight;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
const [siders, setSiders] = React.useState<string[]>([]);

  const { prefixCls, className, children, hasSider, tagName: Tag, ...others } = props;
  const classString = classNames(
    prefixCls,
    {
      [`${prefixCls}-has-sider`]: typeof hasSider === 'boolean' ? hasSider : siders.length > 0,
      [`${prefixCls}-rtl`]: direction === 'rtl',
    },
    className,
  );
  ...