/*
|
* @Description:
|
* @Version: 2.0
|
* @Autor: wuyun
|
* @Date: 2022-12-05 14:04:33
|
* @LastEditors: wuyun
|
* @LastEditTime: 2024-09-03 15:27:18
|
*/
|
/**
|
* v-tableHeight
|
* 动态计算表格高度
|
*/
|
|
import { Directive } from 'vue'
|
import type { DirectiveBinding } from 'vue'
|
import _ from 'lodash'
|
export const tableHeight: Directive = {
|
mounted(el: any, binding: DirectiveBinding) {
|
el.tableHeight = _.debounce(() => {
|
const contentHeight = window.innerHeight //容器的高度
|
const topHeight = el.getBoundingClientRect().top //表格顶部离body的距离
|
const pageinationHeight: any = document.querySelector('.paginationDiv')
|
? document.querySelector('.paginationDiv')?.clientHeight
|
: 0
|
el.style.height =
|
contentHeight - topHeight - pageinationHeight - 51 + 'px' //50是表头的高度 10 是表格和底部的间距
|
})
|
window.addEventListener('resize', el.tableHeight)
|
},
|
updated: (el, binding) => {
|
el.tableHeight()
|
},
|
beforeUnmount: (el) => {
|
window.removeEventListener('resize', el.tableHeight)
|
},
|
}
|
export default tableHeight
|
