likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 13

使用场景:

当在 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)
转载自:https://juejin.cn/post/7274428197235195904
评论
请登录