如何隐藏PrimeNG DataTable无数据时显示的空消息行？

嘿，这个需求我之前做项目时刚好碰到过，给你分享几个靠谱的解决方案：

方案1：直接设置emptyMessage为空字符串 #

PrimeNG的DataTable组件本身提供了emptyMessage输入属性，用来控制空数据时的提示文本。你只要把它设为空字符串，那行提示就会消失：

<p-dataTable [value]="yourDataSource" emptyMessage="">
  <!-- 你的列定义 -->
</p-dataTable>

如果需要在组件类里动态控制，也可以绑定一个空值：

// 组件.ts文件
emptyMsg = '';

<p-dataTable [value]="yourDataSource" [emptyMessage]="emptyMsg">
</p-dataTable>

方案2：用CSS样式隐藏空消息行 #

要是你不想修改组件属性，也可以通过CSS直接隐藏对应的元素。DataTable的空消息行有特定类名p-datatable-empty-message，你可以在全局样式或组件样式文件里添加：

.p-datatable-empty-message {
  display: none !important;
}

如果怕样式影响全局所有DataTable，给目标表格加个自定义类缩小范围：

<p-dataTable class="no-empty-msg" [value]="yourDataSource">
</p-dataTable>

.no-empty-msg .p-datatable-empty-message {
  display: none;
}

注：如果是较老版本的PrimeNG，类名可能是ui-datatable-empty-message，记得对应调整

方案3：使用自定义空模板（适合完全控制空状态的场景） #

PrimeNG支持用pTemplate="empty"替换默认空提示模板，你定义一个空模板，就能让那一行不显示任何内容：

<p-dataTable [value]="yourDataSource">
  <!-- 列定义 -->
  <ng-template pTemplate="empty"></ng-template>
</p-dataTable>

这几个方案里，方案1是最直接的，推荐优先试试。要是遇到版本兼容问题，再换其他方案调整～

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