el-table固定高度

### 设置 `el-table` 组件的高度为固定值

为了使 `el-table` 的高度保持固定，可以利用 CSS 来定义表格容器的高度，并确保其内部元素能够正确响应这一设定。当应用了固定的列(`fixed`)之后，可能会遇到样式上的问题，比如操作列中的按钮未能完全展示以及固定列与其他部分之间的同步问题[^1]。

对于希望设置整个表的高度并让内容滚动而不是扩展超出指定区域的情况，在 `<el-table>` 标签上添加 `height` 或者 `max-height` 属性即可实现此目的：

<template>
  <div style="width: 100%;">
    <!-- 定义一个具有固定高度的 table -->
    <el-table :data="tableData" height="250">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  // 更多数据...
]);
</script>

如果存在由于设置了 `fixed` 导致的最后一列显示异常的问题，则可以通过调整 `.el-table__fixed-right` 类的相关样式来解决这个问题。例如增加该类的选择器优先级以覆盖默认行为，从而修复可能存在的布局错误。

另外需要注意的是，浏览器自带的滚动条尺寸也可能影响到实际效果，因此有时也需要自定义滚动条外观以便更好地控制界面设计[^2]。