import { computed } from 'vue'
|
class TableHeightCalculator {
|
constructor(options) {
|
this.options = options
|
}
|
/**
|
* 计算容器高度
|
*/
|
calculate() {
|
const offset = this.calculateOffset()
|
return {
|
height: offset === 0 ? '100%' : `calc(100% - ${offset}px)`
|
}
|
}
|
/**
|
* 计算偏移量
|
*/
|
calculateOffset() {
|
if (!this.options.showTableHeader.value) {
|
return this.calculatePaginationOffset()
|
}
|
const headerHeight = this.getHeaderHeight()
|
const paginationOffset = this.calculatePaginationOffset()
|
return headerHeight + paginationOffset + TableHeightCalculator.TABLE_HEADER_SPACING
|
}
|
/**
|
* 获取表格头部高度
|
*/
|
getHeaderHeight() {
|
return this.options.tableHeaderHeight.value || TableHeightCalculator.DEFAULT_TABLE_HEADER_HEIGHT
|
}
|
/**
|
* 计算分页器偏移量
|
*/
|
calculatePaginationOffset() {
|
const { paginationHeight, paginationSpacing } = this.options
|
return paginationHeight.value === 0 ? 0 : paginationHeight.value + paginationSpacing.value
|
}
|
}
|
|
TableHeightCalculator.DEFAULT_TABLE_HEADER_HEIGHT = 44
|
TableHeightCalculator.TABLE_HEADER_SPACING = 12
|
|
function useTableHeight(options) {
|
const containerHeight = computed(() => {
|
const calculator = new TableHeightCalculator(options)
|
return calculator.calculate()
|
})
|
return {
|
/** 容器高度样式对象 */
|
containerHeight
|
}
|
}
|
export { useTableHeight }
|
