返回

突破局限，Element Table高度自适应，无需固定值

前端

纯CSS使Element Table自适应高度

项目使用了element-ui组件库，其中table使用得很频繁。在使用过程中，我发现，要使得表格自适应且表头固定，必须要传入height。由于table的高度不是一个固定的值，它会随着屏幕的大小而变化，这就导致了一个问题： 每增加一个表格，都必须写入以下内容：

<el-table height="calc(100vh - 200px)" ></el-table>

虽然这种方法可以实现自适应高度，但是每次都要手动计算表格的高度，不仅繁琐，而且容易出错。有没有一种方法可以让我们不用每次都手动计算表格的高度呢？

有的，我们可以使用CSS来实现这个功能。

.el-table {
  flex: 1;
  height: 100vh;
  overflow: auto;
}

这段CSS代码将使Element Table的高度为100vh，并且随着屏幕的大小而变化。同时，它还将使表格的内容自动滚动。

这样，我们就不用每次都手动计算表格的高度了。

当然，你也可以使用JavaScript来实现这个功能。

const tables = document.querySelectorAll('.el-table');

for (const table of tables) {
  const height = window.innerHeight - 200;
  table.style.height = height + 'px';
}

window.addEventListener('resize', () => {
  const height = window.innerHeight - 200;
  table.style.height = height + 'px';
});

这段JavaScript代码将获取页面上的所有Element Table，然后为它们设置高度。当窗口的大小发生变化时，它也会重新计算表格的高度。

这样，我们就不用每次都手动计算表格的高度了。

无论是使用CSS还是JavaScript，我们都可以轻松地实现Element Table的自适应高度。这将使我们的页面更加灵活，更加美观。

提示：

  • 如果你使用的是Element Table的固定表头，那么你需要在CSS代码中添加position: relative;。
  • 如果你使用的是Element Table的动态表头，那么你需要在JavaScript代码中添加table.style.height = window.innerHeight - 200 + 'px';。

现在，你已经学会了如何使用CSS或JavaScript来实现Element Table的自适应高度。赶快在你的项目中试用一下吧！