【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)
转载自:https://juejin.cn/post/7274428197235195904