如何解决使用mat- *元素时如何使用可扩展的行示例修复此物料表
我正在尝试应用相同的原理在“具有可扩展行的表” example中为我的表获取可扩展行。
我已经对表格的版本进行了类似的样式设置,但是无法正确显示表格的扩展部分。展开的详细信息不会展开相应的行,而只会在重叠的表格上方呈现。与我的版本的唯一区别是,我使用自定义mat-*
元素创建表。
使用本地元素
<table mat-table ...>
...
<tr mat-header-row *matHeaderRowDef="columnsTodisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsTodisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
使用mat- *元素
<mat-table ...>
...
<mat-header-row *matHeaderRowDef="columnsTodisplay"></mat-header-row>
<mat-row *matRowDef="let element; columns: columnsTodisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></mat-row>
</mat-table>
据我了解,是mat-*
元素的样式引起了问题。我肯定必须对样式进行一些调整才能解决某些问题,但是我不知道该怎么做才能完全解决该示例。
mat-table {
width: 100%;
}
mat-row.example-detail-row {
height: 0;
min-height: initial; /* override mat-row styling */
}
mat-row.example-element-row:not(.example-expanded-row):hover {
background: whitesmoke;
}
mat-row.example-element-row:not(.example-expanded-row):active {
background: #efefef;
}
.example-element-row,/* override mat-row styling */
.example-element-row mat-cell {
border-bottom-width: 0;
}
我该如何解决?
解决方法
您对mat-row.example-detail-row
的规则将应用于所有mat-row
元素。这导致您的expandedDetail
行始终具有height: 0
我将example-detail-row
类更改为hidden-detail
,并将以下内容添加到模板的行中:
[class.hidden-detail]="expandedElement !== row"
它现在似乎正在按预期运行。
编辑:
对不起,忘记了这一部分。我相信造成这种情况的根本原因是默认情况下tr
元素显示为table-row
,而mat-row
元素显示为flex
。
事实证明,问题在于,由于<mat-row>
元素使用flex,因此我需要使用flex-basis
来设置明细行的初始高度,而不是使用height
。这样,可以在内容更改时调整高度。
mat-row.example-detail-row {
/* height: 0; */ /* no */
flex-basis: 0; /* yes */
min-height: initial; /* override mat-row styling */
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。