时间戳

首页 > 解决方案 > Ngx-datatable 在悬停时显示图标

css - Ngx-datatable 在悬停时显示图标

问题描述

我正在尝试实现一个 ngx-datatable，只有当鼠标悬停在行上时，我才需要显示删除图标。现在，当我将光标放在行上时，它会在所有行中显示删除图标，而不是正确的行。那么，这样做的正确方法是什么？

<ngx-datatable [rows]="rows"
                class="material"
               [columns]="columns"
               [columnMode]="'force'"
               [headerHeight]="0"
               [footerHeight]="50"
               [rowHeight]="'auto'"
               [reorderable]="reorderable">
  <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
          Title
      </ng-template>
      <ng-template  let-row="row" ngx-datatable-cell-template>
          <span class="title-date">{{row.title}} </span> <span class="author"> - {{row.author}} -</span>
      </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
          Date
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
          <span class="title-date">{{row.created_at | dfnsDistanceInWordsToNow }}</span>
      </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Action
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
          <mat-icon (click)="openDialogWithoutRef(row._id)" class="show-on-hover" class="inline-icon">delete</mat-icon>
      </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

标签： cssangularngx-datatable

解决方案

ngx-datatable 有一个激活输出，您可以使用它来侦听鼠标单击、mouseenter 或 keyup 事件。所以你可以简单地这样做：

<ngx-datatable
      class="material"
      [rows]="users$ | async"
      [columnMode]="ColumnMode.force"
      [headerHeight]="50"
      [footerHeight]="50"
      rowHeight="auto"
      (activate)="onActivate($event)"
    >
      <ngx-datatable-column name="First Name">
        <ng-template let-row="row" ngx-datatable-cell-template>{{ row && row.staff_id.first_name }}</ng-template>
      </ngx-datatable-column>
...

因此，您可以编写一个函数来处理 mouseenter 事件。唯一的问题是它不会触发 mouseleave 事件，这是我一直试图弄清楚的。

PS：对于您的用例，您应该检查事件类型以确保它是鼠标输入。像这样的东西

onActivate (e) {
    const { type, row } = e;
    if (type === 'mouseenter') {
      this.showAction = row._id;
    }
}

这是文档的链接

https://swimlane.gitbook.io/ngx-datatable/api/table/outputs#activate

我希望这有帮助...

干杯

推荐阅读