如何在复用的数据表中仅指定部分列显示popover？

嘿，这个需求很典型，咱们可以通过给数据表组件增加列配置参数的方式，精准控制哪些列显示Popover，具体实现步骤如下：

1. 给数据表组件新增列配置输入参数 #

首先在你的app-data-table组件类中，添加一个popoverColumns输入属性，用来接收父组件传入的需要显示Popover的列名数组：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent {
  @Input() tableData: any[] = [];
  @Input() showhover = false;
  // 新增：指定需要显示Popover的列名数组，默认空数组（不显示）
  @Input() popoverColumns: string[] = []; 

  rowSelected: any;

  showpopover(row: any) {
    this.rowSelected = row;
  }
}

2. 在模板中添加列判断逻辑 #

修改数据表组件模板中的Popover元素，通过*ngIf判断当前列是否在popoverColumns数组中，只有匹配的列才渲染Popover：

<!-- 仅当当前列在popoverColumns数组中时，才显示Popover -->
<span 
  *ngIf="popoverColumns.includes(column.key)" <!-- 这里的column.key要替换成你实际的列标识属性，比如column.name -->
  [ngbPopover]="datapopover" 
  container="body" 
  class="cursor-pointer" 
  popoverClass="hover-class" 
  triggers="mouseenter:mouseleave" 
  (mouseover)="showpopover(element,i,p1,column)" 
  #p1="ngbPopover">
</span>

注意：如果你的列对象用的不是key来标识列名，比如用column.field或者column.title，记得把column.key替换成对应的属性名。

如果需要结合原有的showhover参数一起控制（比如showhover为false时完全不显示），可以把条件改成：

*ngIf="showhover && popoverColumns.includes(column.key)"

3. 父组件复用组件时传入指定列 #

现在你在复用app-data-table时，只需通过[popoverColumns]传入需要显示Popover的列名数组即可：

<!-- 示例1：仅在"name"和"description"列显示Popover -->
<app-data-table 
  [tableData]="partsData" 
  [showhover]=true 
  [popoverColumns]="['name', 'description']"
  (editEvent)="edit($event)" 
  (deleteEvent)="delete($event)">
</app-data-table>

<!-- 示例2：不显示任何列的Popover（不传参数或传空数组） -->
<app-data-table 
  [tableData]="otherData" 
  [showhover]=true 
  [popoverColumns]="[]"
  (editEvent)="edit($event)" 
  (deleteEvent)="delete($event)">
</app-data-table>

这样一来，你就可以在不同的复用场景中，灵活控制哪些列显示Popover，完全满足你的需求啦！

内容的提问来源于stack exchange，提问作者Vaisakh