css 如何让mat-sort-header不都是可点击的

dm7nw8vv 于 2023-06-25 发布在其他

关注(0)|答案(5)|浏览(132)

我有一个垫表使用下面的代码与可排序的标题。不过我也想把一个菜单中的自定义过滤的标题。问题是，因为整个标题可点击，并改变了列的‘排序‘，当我点击菜单时，它也排序，因为菜单按钮在标题内。

<mat-table #table [dataSource]="dataSource" matSort>
                <ng-container matColumnDef="Borrower1">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> 
                    <div class="header">
                      Borrower1
                      <button mat-button [matMenuTriggerFor]="menu" #matMenuTrigger="matMenuTrigger" >
                        <mat-icon>filter_list</mat-icon>
                      </button>
                    </div>
                     <mat-menu #menu="matMenu"   >
                          <div (mouseleave)="matMenuTrigger.closeMenu()">
                            <button mat-menu-item>Item 1</button>
                            <button mat-menu-item>Item 2</button>
                            <button mat-menu-item>Item 3</button>
                            <button mat-menu-item>Item 4</button>
                            <button mat-menu-item>Item 5</button>
                          </div>
                        </mat-menu>     
                  </mat-header-cell>

                  <mat-cell *matCellDef="let element"> {{element.Borrower1}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef="_id">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> 
                    _id
                  </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element._id}} </mat-cell>
                </ng-container>
                <ng-container matColumnDef="edit">
                  <mat-header-cell *matHeaderCellDef></mat-header-cell>
                  <mat-cell *matCellDef="let element">
                    <a (click)="editDialog(element._id)" type="button">
                            <mat-icon class="icon">edit</mat-icon>
                    </a>
                  </mat-cell>
                </ng-container>
                <ng-container matColumnDef="delete">
                  <mat-header-cell *matHeaderCellDef></mat-header-cell>
                  <mat-cell *matCellDef="let element">
                    <a (click)="deletePost(element._id)" type="button">
                            <mat-icon class="icon">delete</mat-icon>
                    </a>
                  </mat-cell>
                </ng-container>   
                <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
              </mat-table>

有办法绕过这个吗

css

来源：https://stackoverflow.com/questions/53073229/how-to-make-mat-sort-header-not-all-clickable

5条答案

按热度按时间

0x6upsns1#

尝试将头文件中所有不希望触发排序的内容打包到一个div中，并在其上放置一个click处理程序，调用$event.stopPropagation（）。

赞(0）回复(0）举报 2023-06-25

nafvub8i2#

晚了，但似乎可以在子元素上设置mat-sort-header指令。所以这似乎行得通：

<mat-header-cell *matHeaderCellDef>
    <div class="header">
        <div class="sort-only-on-this" mat-sort-header>
            Borrower1
        </div>

        <button />
        ...
    </div>

</mat-header-cell>

赞(0）回复(0）举报 2023-06-25

gwbalxhn3#

只需从不想点击的头中删除mat-sort-header指令（SORTABLE）：

<mat-table #table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="_id">
            <mat-header-cell *matHeaderCellDef>
                Id // NOT SORTABLE
            </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.Id}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="edit">
            <mat-header-cell *matHeaderCellDef mat-sort-header>
                Number // SORTABLE
            </mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.Number}}</mat-cell>
        </ng-container>
    </mat-table>

赞(0）回复(0）举报 2023-06-25

rkkpypqq4#

将菜单放入一个div中，并将（click）="$event.stopPropagation（）”添加到div中，如

<div (click)="$event.stopPropagation()">
   your menu....
</div>

希望它能解决你的问题。

赞(0）回复(0）举报 2023-06-25

bwitn5fc5#

你可以检查一下这个（这不是根据你的代码，但可以帮助你）：

<ng-container matColumnDef="test" formGroupName="yourFormGroupName">
          <mat-header-cell *matHeaderCellDef >
            <span [matMenuTriggerFor]="appMenu" class="cursor-pointer">Text</span>
            <span mat-sort-header arrowPosition="after"></span>
          </mat-header-cell>

          <mat-menu #appMenu="matMenu">
            <!--some html-->
          </mat-menu>

          <mat-cell *matCellDef="let row; let rowIndex = index">text</mat-cell>
          <mat-footer-cell *matFooterCellDef></mat-footer-cell>
</ng-container>

实际上，上面的html不是我正在使用的html（所以我不确定）。我使用的html是：

<ng-container matColumnDef="test" formGroupName="yourFormGroupName">
          <th *matHeaderCellDef mat-header-cell mat-sort-header class="cursor-pointer">
            <span [matMenuTriggerFor]="appMenu" (click)="$event.stopPropagation()" class="cursor-pointer">Text</span>
            <span arrowPosition="after"></span>
            <mat-menu #appMenu="matMenu">
              <!--some html-->
            </mat-menu>
          </th>
          <td *matCellDef="let row; let rowIndex = index" mat-cell>text</td>
          <td *matFooterCellDef mat-footer-cell></td>
</ng-container>

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何让mat-sort-header不都是可点击的

5条答案

相关问题

热门标签

最新问答