目的

在项目开发过程中，界面内容需要根据显示屏幕或缩放比例进行自适应，使用el-table的时候发现height属性使用 calc(100% - 250px) 不起作用，无法进行滚动操作，250是layout页面，其他组件布局高度。

原因

经过调试发现 el-table height 属性 只能使用 数字 或者 字符串 设定值能实现滚动效果。暂时先记录一种处理办法。

解决办法

1. 使用计算属性 窗口大小变化时，动态计算高度

<template>
  <div class="wanan-page-container">
    <el-card ref="cardRef" class="wanan-h-full" body-class="wanan-h-full">
      <el-table
        ref="tableRef"
        :data="tableData"
        show-overflow-tooltip
        :height="table.tableAotoHeight"
        highlight-current-row
        border
      >
        <el-table-column width="40" align="center"></el-table-column>
        <el-table-column prop="Id" label="编码" align="left" />
        <el-table-column prop="Name" label="名称" align="center" />
        <el-table-column prop="Ename" label="代码" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
const cardRef = ref();

const table = reactive({
  tableAotoHeight: 550
});
window.onresize = () => {
  nextTick(() => {
    table.tableAotoHeight = cardRef.value?.$el.clientHeight - 250;
  });
};

onMounted(() => {
  table.tableAotoHeight = cardRef.value?.$el.clientHeight - 250;
});
</script>

// 页面最底层容器，95px为菜单栏的高度
.wanan-page-container {
  height: calc(100vh - 95px);
  padding: 10px;  // 统一样式，上下左右都给10px的内边距
}
// 继承父级高度
.wanan-h-full {
  height: 100%;
}