返回

解除elementui-Table-设置fixed限制，畅行表格横向滚动条

前端

固定列是表格中常见的功能，可以将某些重要列固定在表格左侧，即使滚动表格，这些列也不会消失。在elementui中，可以通过fixed属性来实现固定列。但需要注意的是，fixed属性只能固定列，不能固定行。

当您在elementui中使用Table组件时，如果设置了fixed属性，那么表格的横向滚动条就无法滚动。这是因为fixed属性会将列固定在表格左侧，从而导致表格的宽度固定。如果表格的内容超过了表格的宽度，那么横向滚动条就无法滚动。

为了解决这个问题，您可以使用以下方法：

  1. 使用flex布局：您可以使用flex布局来实现固定列和可滚动表格。具体做法是，将Table组件包裹在一个div元素中，并为div元素设置flex布局。然后，您可以将固定列放在div元素的左侧，并将可滚动表格放在div元素的右侧。

  2. 使用position属性：您可以使用position属性来实现固定列和可滚动表格。具体做法是，将固定列的position属性设置为fixed，并将可滚动表格的position属性设置为relative。然后，您可以将固定列放在可滚动表格的前面。

使用以上方法，您就可以在elementui中使用Table组件时，既能固定列，又能自由滚动表格。

现在，让我们通过一个示例来演示如何使用flex布局来实现固定列和可滚动表格。

<div class="table-wrapper">
  <div class="fixed-columns">
    <el-table :data="tableData" :height="tableHeight" :border="true">
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
    </el-table>
  </div>
  <div class="scrollable-table">
    <el-table :data="tableData" :height="tableHeight" :border="true">
      <el-table-column prop="address" label="地址" width="200"></el-table-column>
      <el-table-column prop="phone" label="电话" width="150"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
    </el-table>
  </div>
</div>

.table-wrapper {
  display: flex;
}

.fixed-columns {
  flex: 0 0 300px;
}

.scrollable-table {
  flex: 1;
}

在这个示例中，我们使用flex布局将Table组件包裹在一个div元素中，并为div元素设置flex布局。然后，我们将固定列放在div元素的左侧，并将可滚动表格放在div元素的右侧。这样，我们就实现了固定列和可滚动表格。

希望本文能帮助您解决elementui-Table-设置fixed限制，表格横向滚动条无法滚动的问题。如果您还有其他问题，欢迎在评论区留言。