Angular 材质 Table 展开和折叠 table 单元格？

Question

我已经有了垫子 table 和当前行点击事件。我需要能够有一个可折叠的 table 单元格，具体取决于单元格中的数据量。在下面的情况下，它是一个文本区域

如果一个单元格的长度超过 30，则它需要显示前 30 个字符和一个省略号....就像下面发布的示例。

如果用户单击省略号，它将展开该特定单元格，仅显示该单元格的所有数据。

例如，我可以有一行看起来像这样

   Name      Address          Zip
   Jon      123 Main         44444
   Sam      4444 Chatt...    65984
   Amy      777 Main         44444

他们会点击 Sam 的地址单元格，它会显示

       Name      Address                        Zip
       Jon      123 Main                       44444
       Sam      4444 Chattanooga Street  ...   65984
                Apartment 105
       Amy      777 Main                       44444

在 Materials Table 中可能吗？

<td mat-cell *matCellDef="let element" [hidden]="column.Hidden" (mouseenter)="_mouseEnter($event, element, column.MouseEnter)" (mouseleave)="_mouseLeave($event, element, column.MouseLeave)" class="{{column.Classes}}">

             <div *ngSwitchCase="CellType.TextArea" class="text-center">
                <app-textarea [(text)]="element[column.Value]" [title]="column.Title"></app-textarea>
              </div>
  </td>

Answer 1

您可以使用纯 html css 像这样扩展单元格。您可以将此 css 嵌入到您的 Angular 中并试一试。

我已将第一个单元格设为可扩展，其余的您可以复制并重做。将内容 class 添加到 <td>

的 y 个子项

如果您想在点击时执行此操作，只需添加一个更新您的 classes 的事件列表器。

  <td mat-cell *matCellDef="let element" [hidden]="column.Hidden" 
  (mouseenter)="_mouseEnter($event, element, column.MouseEnter)" 
  (mouseleave)="_mouseLeave($event, element, column.MouseLeave)" class=" 
  {{column.Classes}}">

      <div *ngSwitchCase="CellType.TextArea" class="text-center content"> //added class
                <app-textarea [(text)]="element[column.Value]" [title]="column.Title"> 
                </app-textarea>
      </div>


  </td>

body,table{
    font-family:verdana,arial,sans-serif;
    font-size:12px;
    border-collapse:collapse;
}

td,th{
    padding:3px 3px;
    margin:0px;
    border:1px solid #BBB;
    white-space:nowrap;
}

.content{
    height:15px;
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis
}
.content:hover{
    height:auto;
    width:auto;

}

<table>

<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>

<tr>
<td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
</div>
</td>
<td>Data2,1</td>
<td>Data3,1</td>
</tr>

<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>

<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>

</table>

Angular 材质 Table 展开和折叠 table 单元格？

Angular Materials Table expand and collapse table cell?

css

angular

angular-material

angular-material-table