轻松驾驭el-table高度自适应，玩转表格分页不挤压！

2022-11-30 18:07:27

告别滚动条烦恼：实现el-table高度自适应的秘籍

作为前端开发人员，我们在使用el-table组件时常常会遇到一个令人头疼的问题：表格高度固定，数据过多就会出现滚动条，破坏用户体验。为了解决这个困扰，本文将深入探讨如何巧妙地让el-table的高度自适应，让分页组件不再被挤压，完美贴合你的页面。

## 深入浅出，理解背后的原理

要实现el-table的高度自适应，我们首先需要理解其中的原理。我们将使用flex布局，它是一种强大的布局技术，可以灵活控制元素的尺寸和位置。

flex布局就像一个弹性容器，里面的元素就像弹簧，可以根据需要自由伸缩。我们将el-table的父容器设置为一个弹性容器，并将其高度设置为0。这样，当el-table的数据过多时，父容器的高度会自动扩展，让el-table得以伸展，从而实现高度自适应。

## 代码实践，轻松实现自适应

掌握了原理，接下来就是动手实践了。只需在el-table的父容器上添加以下CSS代码：

.el-table-container {
  display: flex;
  flex-direction: column;
}

.el-table {
  flex: 1;
}

.el-table-container {
  min-height: 0;
}

让我们逐行拆解：

.el-table-container { display: flex; flex-direction: column; }：这将el-table的父容器设置为一个垂直弹性容器。
.el-table { flex: 1; }：这将el-table设置为弹性容器中的弹性元素，并让其占据剩余的可用空间。
.el-table-container { min-height: 0; }：这将父容器的最小高度设置为0，防止其在没有内容时占据空间。

## 实例演示，直观感受效果

为了让你更直观地感受效果，我们准备了一段HTML和CSS代码，可以自由复制使用：

<div class="el-table-container">
  <el-table :data="tableData" height="100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
  <el-pagination
    @current-change="handleCurrentChange"
    :page-size="10"
    :total="tableData.length"
  ></el-pagination>
</div>

.el-table-container {
  display: flex;
  flex-direction: column;
}

.el-table {
  flex: 1;
}

.el-table-container {
  min-height: 0;
}

粘贴到你的项目中，你将看到el-table的高度会随着数据量的变化而自动调整，分页组件始终固定在表格底部，再也不会被挤压。

## 常见问题解答，化解你的疑惑

为什么我使用了代码，但是el-table还是没有高度自适应？
- 请检查你的代码是否正确，尤其是.el-table-container是否正确应用了flex布局。
我可以将el-table的高度设置为一个固定值吗？
- 可以，只需将.el-table { flex: 1; }中的flex值替换为你想要的固定高度即可。
flex布局会影响el-table的其他功能吗？
- 不会，flex布局只是控制元素的尺寸和位置，不会影响el-table的排序、筛选等功能。
这个方法兼容所有浏览器吗？
- 是的，flex布局得到了所有现代浏览器的广泛支持。
有哪些其他方法可以实现el-table的高度自适应？
- 除了flex布局，还可以使用CSS网格布局或auto高度，但这些方法的兼容性可能不如flex布局。