vue3/elementplus表格顶部固定高度计算

1.表格标签

<el-table  :data="costList" border :height="tableHeight">

2.具体实现

const tableHeight = ref(500);
const settingsStore = useSettingsStore();

// 此方法 精确计算表格高度，固定表格顶部用
const calculateTableHeight = () => {
    const windowHeight = window.innerHeight; // 窗口高度，比如1366*768笔记本屏幕，这个值就是768高
    const navbarHeight = 50; // 头部导航栏高度
    const tagsHeight = settingsStore.tagsView ? 39 : 0; // 头部tags高度
    const tabsHeight = 62; // tabs栏高度
    const btnHeight = 52; // 按钮栏高度
    const paginationHeight = 72; // 分页高度
    const pageContainerPadding = 10; // 页面容器的padding高度
    tableHeight.value = windowHeight - navbarHeight - tagsHeight - btnHeight - paginationHeight - pageContainerPadding - tabsHeight;
};

onMounted(() => {
    calculateTableHeight();
    window.addEventListener('resize', calculateTableHeight);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', calculateTableHeight);
});