PrimeVue DataTable如何隐藏无展开行数据的主行？

一、初始数据处理：直接过滤无详情的主行 #

既然后端数据无法修改，前端拿到数据后先做一次预过滤，只保留带有有效详情（比如products数组非空）的项，从根源上避免显示空展开行的主行：

// 假设后端返回的原始数据存在rawData里
const rawData = ref([
  { category: 'Clothing', products: [{ name: 'Red T-Shirt' }, { name: 'Blue T-Shirt' }] },
  { category: 'Electronics', products: [] }, // 无详情的行
  // ...其他数据
]);

// 初始过滤：只保留products数组非空的项
const displayData = ref(rawData.value.filter(item => item.products?.length > 0));

把DataTable的:value绑定到displayData，这样初始状态下就不会显示无详情的主行。

二、利用DataTable的filter事件处理过滤后的二次筛选 #

PrimeVue DataTable提供了@filter事件，这个事件会在表格过滤操作完成后触发，并且返回过滤后的原始数据集。你可以在这个事件里对过滤结果再次筛选，移除掉详情为空的行：

<DataTable
  :value="displayData"
  @filter="handleFilter"
  :filters="tableFilters"
  <!-- 其他配置项：列、行展开模板等 -->
>
  <!-- 列定义 -->
  <Column field="category" header="Category"></Column>
  
  <!-- 行展开模板 -->
  <template #expansion="slotProps">
    <div v-if="slotProps.data.products.length > 0">
      <!-- 详情内容 -->
      <p>详情：{{ slotProps.data.products.map(p => p.name).join(', ') }}</p>
    </div>
  </template>
</DataTable>

对应的事件处理函数：

const handleFilter = (event) => {
  // event.filteredValue是DataTable完成过滤后的原始数据，我们二次筛选掉无详情的行
  displayData.value = event.filteredValue.filter(item => item.products?.length > 0);
};

这样不管用户怎么过滤，只要过滤完成后，都会自动移除那些详情为空的主行，不会出现延迟或者空行残留的问题。

补充说明 #

• 之前监听过滤器变量时机不对，是因为过滤器变量变化后，DataTable的过滤操作是内部异步执行的，你提前修改数据时，表格还没完成过滤，所以会拿到错误的结果。而@filter事件是表格内部过滤完成后才触发的，时机完全匹配。
• 如果使用了自定义过滤器或者全局过滤规则，@filter事件依然生效，只要表格完成过滤就会触发该事件。

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