如何更改 mat-table 中行的高度
Posted
技术标签:
【中文标题】如何更改 mat-table 中行的高度【英文标题】:How to change elvation of a row in mat-table 【发布时间】:2019-07-04 16:20:07 【问题描述】:我正在尝试提升 mat-table 中悬停的行,因此在悬停时将高度更改为 <tr>
,但作为阴影效果的高度未显示在行的底部,但显示为顶部、左侧和右侧行。
.html
<div class="mat-elevation-z2" #TABLE>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Required Columns... -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
(mouseover)="onMouseOver(e)" [ngClass] = "'mat-elevation-z24' : e == mouseOverIndex"></tr>
</table>
</div>
.ts
mouseOverIndex = -1;
public onMouseOver(index)
this.mouseOverIndex = index;
.css
.mat-row:hover
cursor: pointer;
我在这里错过了什么?
我尝试使用“z24”、“z16”、“z8”等,但没有用。
【问题讨论】:
行的底部是什么意思? 悬停行上的background: inherit
似乎覆盖了底部的阴影。
将以下内容添加到 CSS 将解决此问题。
[mat-row].remove-background
background: none ;
然后将类应用于您的行。
<tr mat-row class="remove-background" (mouseover)="onMouseOver(e)"
堆栈闪电战
https://stackblitz.com/edit/angular-ecrvzg?embed=1&file=app/table-basic-example.css
【讨论】:
有什么办法可以自定义背景和这个功能吗?以上是关于如何更改 mat-table 中行的高度的主要内容,如果未能解决你的问题,请参考以下文章