ElTable设置max-height滚动失效问题详解及其解决方法

2023-10-02 06:27:33

最近在编写vue项目时，我遇到了一个有趣的问题：在el-table中设置max-height属性时，滚动只有在设置为px单位时才生效，而设置为100%时，滚动却失效了。相反，height属性设置为100%时却可以正常滚动。我决定深入研究这个问题，并找到了一个简单的解决方法。

我们先来看看一个简单的代码示例：

<template>
  <div class="table-container">
    <el-table :data="tableData" max-height="100%" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="address" label="地址" width="200"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John Doe', age: 30, address: '123 Main Street' },
        { name: 'Jane Smith', age: 25, address: '456 Oak Avenue' },
        { name: 'Michael Jones', age: 35, address: '789 Maple Street' },
      ]
    }
  }
}
</script>

<style>
.table-container {
  height: 300px;
  overflow: auto;
}
</style>

在这个例子中，我们设置了el-table的max-height为100%，并将其放在一个具有固定高度的div容器中。我们期望表格能够在容器中滚动，但实际上却并没有发生这种情况。

问题出在哪里呢？

经过一番调查，我发现el-table的滚动行为是由CSS属性overflow-y控制的。当max-height设置为一个固定的像素值时，overflow-y会被自动设置为scroll，从而启用滚动。但是，当max-height设置为100%时，overflow-y不会被自动设置，因此滚动就失效了。

为了解决这个问题，我们需要手动将overflow-y设置为scroll。我们可以通过在el-table的style属性中添加以下代码来实现：

overflow-y: scroll;

修改后的代码如下：

<template>
  <div class="table-container">
    <el-table :data="tableData" max-height="100%" style="width: 100%; overflow-y: scroll">
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="address" label="地址" width="200"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John Doe', age: 30, address: '123 Main Street' },
        { name: 'Jane Smith', age: 25, address: '456 Oak Avenue' },
        { name: 'Michael Jones', age: 35, address: '789 Maple Street' },
      ]
    }
  }
}
</script>

<style>
.table-container {
  height: 300px;
}
</style>