1.创建自定义指令
import {Directive, DirectiveBinding, nextTick} from 'vue'
interface ExHTMLElement extends HTMLElement {
resizeListener: EventListener
}
export const adaptive: Directive = {
mounted: (el: ExHTMLElement, binding: DirectiveBinding) => {
el.resizeListener = () => {
nextTick(() => {
setHeight(el, binding)
})
}
nextTick(() => {
setHeight(el, binding)
})
window.addEventListener('resize', el.resizeListener)
},
unmounted(el: ExHTMLElement) {
window.removeEventListener('resize', el.resizeListener)
},
updated(el: ExHTMLElement, binding: DirectiveBinding) {
nextTick(() => {
setHeight(el, binding)
})
},
}
// set el-table height
function setHeight(el: ExHTMLElement, binding: DirectiveBinding) {
const top = el.previousSibling.offsetHeight + 88 // 88px为本项目layout中tags标签的高度和header的高度
const bottom = binding?.value?.bottom || 48 //48px为vxe-pager的高度
const pageHeight = window.innerHeight //整个屏幕的高度
//1. 当表格在模态框中使用时
if (el.parentElement.getAttribute("class") == 'vxe-modal--content') {
el.style.height = el.parentElement.clientHeight - top - bottom - 14 + 'px'
// 14px 是vxe-model的默认padding
} else { //2. 当表格在普通页面使用时
el.style.height = pageHeight - top - bottom + 'px'
}
el.style.overflowY = 'auto'
}
2.将vxe-table使用一个div包裹起来 将此div设置v-adaptive属性 vxe-table的height 设为100% (注意:分页器应放在该div的外部,与该div同级)