elementui table 自动隐藏

您好！关于 element-ui table 的自动隐藏，可以通过设置表格的最大高度和 overflow 属性来实现。具体做法如下：

1. 在表格外层包裹一个容器，并设置容器的最大高度和 overflow 属性，例如：

<div class="table-container" style="max-height: 400px; overflow: auto;">
  <el-table :data="tableData">
    <!-- 表格内容 -->
  </el-table>
</div>

2. 根据表格的行高和行数计算出表格的最大高度，并将其设置为容器的最大高度，例如：

mounted() {
  const rowHeight = 48; // 行高
  const rowCount = 10; // 行数
  const maxHeight = rowHeight * rowCount;
  document.querySelector('.table-container').style.maxHeight = maxHeight + 'px';
}

这样就可以实现当表格内容超出容器高度时自动隐藏并显示滚动条。

相关问题

elementui表格隐藏列

要在ElementUI表格中隐藏列，可以使用 `show-overflow-tooltip` 属性和 `tooltip-effect` 属性。具体步骤如下：

1. 在表格列的定义中，为需要隐藏的列添加 `show-overflow-tooltip` 属性。

<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>

2. 在表格组件中，添加 `tooltip-effect` 属性并设置为 `'dark'` 或 `'light'`，以使隐藏的列显示为省略号。如果设置为 `'none'`，则隐藏的列将不会显示任何省略号。

<el-table :data="tableData" tooltip-effect="dark">
  <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

这样，表格中添加了 `show-overflow-tooltip` 属性的列将会自动隐藏，并在鼠标悬浮时显示为省略号。

elementui 自动调整列宽

ElementUI 表格组件提供了 `fit` 属性来自动调整列宽，可以设置为 `true` 或 `'overflow'`。

当设置为 `true` 时，会根据表格内容自动调整列宽，但是如果表格内容太多超出了容器宽度，可能会出现水平滚动条。

当设置为 `'overflow'` 时，会根据表格内容自动调整列宽，但是如果表格内容太多超出了容器宽度，会隐藏超出部分并显示省略号，不会出现水平滚动条。

示例代码：

<el-table :data="tableData" fit>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址" width="180"></el-table-column>
</el-table>

在上面的示例中，`fit` 属性设置为 `true`，第三列的宽度没有设置，会根据表格内容自动调整列宽。