【Vue3】如何实现一个自适应表格高度的 Vue Hooks

使用场景：

当在 Vue 中使用表格组件时，希望表格高度能够自适应其内容，并且当表格容器的高度发生变化时能够及时更新表格高度。

实现方法：

1.

在函数中，创建了一个 height 变量，使用了 Vue 的 ref 函数来创建一个响应式的变量，初始值为 defaultHeight（默认为 400）。

2.

setTableHeight 函数使用了 debounce 函数，以在表格高度变化时进行防抖处理。防抖函数会在连续触发事件后的一段时间内只执行一次回调函数。回调函数中，通过获取表格元素的高度（offsetHeight），计算出表格内容的实际高度，并将其保存在 height 变量中。listenHeight 函数用于监听表格高度的变化。

3.

使用 elementResizeDetectorMaker 函数创建了一个用于监听元素大小变化的实例（erd）。然后，通过 document.getElementById 获取到指定 id 的表格元素（el）。最后，使用 erd.listenTo 方法监听表格元素的大小变化，并在变化时调用 setTableHeight 函数。在组件挂载后（onMounted），调用 listenHeight 函数开始监听表格高度变化。

4.

最后，将 height 变量作为响应式的返回值，将hook命名为useAdjustTable.js放入hooks文件夹以便在组件中使用。 代码：

import elementResizeDetectorMaker from 'element-resize-detector'
import debounce from 'lodash/debounce'
import { ref, onMounted } from 'vue'
/**
 * table组件自适应hooks，用于table高度自适应
 * @param {String} id 表格ID
 */
export default function (id, defaultHeight = 400) {
  const height = ref(defaultHeight)

  const setTableHeight = debounce(
    element => {
      const eleHeight = element?.offsetHeight
      // 获取表格container高度
      const tableHeight = eleHeight
      // 40：表格头高度
      const headerHeight = 40
      height.value = tableHeight - headerHeight
    },
    30,
    {
      trailing: true
    }
  )

  const listenHeight = () => {
    const erd = elementResizeDetectorMaker()
    const el = document.getElementById(id)
    erd.listenTo(el, setTableHeight)
  }

  onMounted(listenHeight)

  return {
    height
  }
}

使用示例：

   <a-table
      :id="tableId"
      class="drawer-table"
      :columns="COLUMNS"
      :data-source="attributeList"
      :pagination="false"
      :row-selection="rowSelection"
      :row-key="record => record.enName"
      :scroll="{ y: height }"
    >
    ...
    import useAdjustTable from '@/hooks/useAdjustTable'
    const { height } = useAdjustTable(tableId)