如何更改 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”等,但没有用。

【问题讨论】:

行的底部是什么意思? 悬停 和悬停 + 1 的 之间的空格。我想显示好像悬停的 比剩余的 s. 稍微高一点 【参考方案1】:

行上的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 中行的高度的主要内容,如果未能解决你的问题,请参考以下文章

两个动态创建的表中行的相等高度,使用JQuery

转DataTable使用技巧

如何更改已经具有高度锚的 UIView 的高度?

如何根据布局高度以编程方式更改视图高度

如何动态更改 Handsontable 的高度参数

如何动态更改 jQuery Datatables 高度