具有可扩展行的 Angular + Bootstrap 表

Question

在我当前的项目中，由于是在 *ngFor 指令中生成的，并且数据来自后端，因此我有一个包含可变数量的列和行的表。由于这一点以及单元格中可能存在大量文本的事实，存在溢出并且并非所有列都可以显示。 我最初通过将溢出换行换行来解决它，但是由于它可能是很多文本，因此某些行可能太大了。

我的想法是在溢出隐藏的地方显示某种预览（类似于overflow: ellipsis，但可以展开行以显示所有信息。这样，行将具有合理的大小，但所有可以显示信息。数据存储在一个对象中，列名是string[]，数据是string[][]。

<div class="table-responsive">
<table class="table  table-bordered table-striped table-hover table-condensed">
  <thead>
    <tr>
      <th *ngFor="let name of data.columnNames">{{name}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of data.data">
      <td *ngFor="let item of row">
        {{item}}
      </td>
    </tr>
  </tbody>
</table>

你们会怎么做呢？

Answer 1

您可以离开带有溢出省略号的表格，然后单击该行，您可以打开一个显示所有数据的模式，以改善所有屏幕分辨率下的用户体验。