Question

我正试图在垫子表中升高悬停的行，因此将悬停时的高程更改为<tr>，但高程是阴影效果，未在行的底部显示，但在顶部，左侧和顶部显示该行的右侧。

.html

<div class="mat-elevation-z2" #TABLE>
      <table mat-table [dataSource]="dataSource" matSort>

    <!-- Required Coloumns... -->

    <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'等，但没有用。

Answer 1

似乎该行上的background: inherit覆盖了底部的阴影。

将以下内容添加到CSS将解决此问题。

[mat-row].remove-background {
  background: none ;
}

然后将类应用于您的行。

<tr mat-row class="remove-background" (mouseover)="onMouseOver(e)"

Stackblitz

https://stackblitz.com/edit/angular-ecrvzg?embed=1&file=app/table-basic-example.css

如何更改mat-table中行的高度

1 个答案: