AntD 表格固定表头

Ant Design 的表格组件 Table 可以固定表头，但只能通过设置 scroll={ y: 240 }(这里没有用双{}，是因为 vuepress 编译报错) 这种方式来实现，需要自己手动算出 y 的值，而不像 Element UI，设置 flex 布局后，设置 height="100%" 就可以了

我尝试将 Ant Design 的表格改成 flex 布局，但最后实现不了，只能自己手动算出 y 的值

那就算一下吧

大体思路就是 calc(100vh - 表头.getBoundingClientRect().bottom - 表体底部距页面底部距离)

/**
 * 获取表格的可视化高度
 * @param {*} extraHeight 额外的高度 (表格底部的内容高度 Number 类型，默认为 30)
 * @param {*} id 当前页面中有多个 table 时需要制定 table 的 id
 */
export function getTableScroll(extraHeight = 30, id = null) {
  let tHeader = null
  if (id) {
    tHeader = document.getElementById(id)?.getElementsByClassName('ant-table-thead')?.[0]
  } else {
    tHeader = document.getElementsByClassName('ant-table-thead')?.[0]
  }
  // 表格内容距离顶部的距离
  let tHeaderBottom = 0
  if (tHeader) {
    tHeaderBottom = tHeader.getBoundingClientRect().bottom
  }

  // 窗体高度 - 表格内容顶部的高度 - 表格内容底部的高度
  const height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`
  return height
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

然后就可以在页面使用了：

const [scrollY, setScrollY] = useState('')

useEffect(() => {
  getScrollY()
  window.addEventListener('resize', getScrollY)
  return () => {
    window.removeEventListener('resize', getScrollY)
  }
}, [])

const getScrollY = () => {
  setScrollY(getTableScroll())
}

1
2
3
4
5
6
7
8
9
10
11
12
13

但如果每个页面都这样写一遍也挺费事的，所以我们还可以封装一个 hook，用于获取表格的可视化高度

useTableScrollY

export function useTableScrollY(extraHeight = 30, id = null) {
  const [scrollY, setScrollY] = useState('')

  useEffect(() => {
    getScrollY()
    window.addEventListener('resize', getScrollY)
    return () => {
      window.removeEventListener('resize', getScrollY)
    }
  }, [])

  const getScrollY = () => {
    setScrollY(getTableScroll(extraHeight, id))
  }

  return scrollY
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

还可以把节流加上

import { useCallback, useEffect, useState } from 'react'
import { throttle } from 'lodash'

import { getTableScroll } from '@/utils'

/**
 * @description 动态获取 table 高度
 * @param extraHeight 额外的高度 (表格底部的内容高度，Number 类型，默认为 30)
 * @param id 当前页面中有多个 table 时需要指定 table 的 id
 * @returns [scrollY: string, getScrollY: function]
 */
const useTableScrollY = (extraHeight = 30, id = null): [string, () => void] => {
  const [scrollY, setScrollY] = useState('')

  useEffect(() => {
    getScrollY()
    window.addEventListener('resize', getScrollY)
    return () => {
      window.removeEventListener('resize', getScrollY)
    }
  }, [])

  /**
   * @description 动态获取 table 高度
   */
  const getScrollY = useCallback(
    throttle(() => {
      console.log(11)
      return setScrollY(getTableScroll(extraHeight, id))
    }, 500),
    []
  )

  return [scrollY, getScrollY]
}

export default useTableScrollY

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

使用方式：

const [scrollY, getScrollY] = useTableScrollY()

这样就完美了

编辑

上次更新: 2/4/2024, 8:40:43 AM

← 基于 AntD 封装的可编辑 tabs AntD 表格 shift 多选支持父子联动→