Question

我有一个mat-data-table，其中mat-expansion-panel作为列。出于某些原因，在某些行上，mat-expansion-panel有一个边框，我该怎么摆脱它。当用户悬停鼠标时，扩展面板会扩展，当鼠标离开时，它会折叠。这些行具有的数据，它们与没有边框的数据相同。在这张照片中，它的注释列在垫子单元内部有垫子扩展面板。

[！[在此处输入图像说明] [2]] [2]

[！[在此处输入图像说明] [3]] [3]

 <mat-cell *matCellDef="let workOrder">
                    <mat-expansion-panel class="" _ngcontent-c0="" ng-reflect-hide-toggle="true" #panel *ngIf="workOrder.notes !== ''" hideToggle="true"
                        (mouseenter)="panel.open()" (mouseleave)="panel.close()">
                        <mat-expansion-panel-header>
                            <mat-panel-title style="justify-content: center">
                                <mat-icon style="color:#8fbbdf;">notes</mat-icon>
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <mat-panel-description>
                            {{ workOrder.notes }}
                        </mat-panel-description>
                    </mat-expansion-panel>
                </mat-cell>

Answer 1

问题似乎出现在mat-expansion-panel标签上。如果我删除它的所有类，边框消失，因此它可能是某个类的“问题”或多个组合。我改变了：

<mat-expansion-panel _ngcontent-c0="" class="mat-expansion-panel ng-tns-c3-1 ng-star-inserted" hidetoggle="true" ng-reflect-hide-toggle="true">

为：

<mat-expansion-panel _ngcontent-c0="" class="" hidetoggle="true" ng-reflect-hide-toggle="true">

在第一个元素上，这是结果（我想是所需的）：

展开时工作正常：希望它能帮到你

Answer 2

我也遇到了类似的问题，我通过将background-color上的mat-expansion-panel设置为与其余内容相同的背景色来解决了这个问题。就我而言，我将其设置为white。

之所以无法在devtools中进行检查，是因为它不是真正的边框元素，但由于其尺寸类似，因此外观看起来像个

。

Answer 3

覆盖mat-expansion-panel显示属性，例如：mat-expansion-panel style =“ display：unset;”

垫子扩展面板删除边框

3 个答案: