PrimeVue DataTable数值数据条件格式化失效问题求助

我尝试根据单元格值对PrimeVue DataTable的单元格进行条件格式化，参考官方条件样式示例实现但未生效。因项目包含数十列，需动态遍历列，以下是可复现代码：

<script setup lang="ts">
import DataTable from "primevue/datatable";
import Column from "primevue/column";

let data = Array.from({ length: 10 }, () => ({
  key1: Math.random(),
  key2: Math.random(),
  key3: Math.random(),
  key4: Math.random(),
}));

function formatterClass(data: {}) {
  return [
    "border-circle w-2rem h-2rem inline-flex justify-content-center align-items-center text-sm",
    {
      "bg-red-100 text-red-900": data["key4" as keyof typeof data] < 0.3,
      "bg-orange-100 text-orange-900": data["key4" as keyof typeof data] >= 0.3 && data["key4" as keyof typeof data] < 0.6,
      "bg-teal-100 text-teal-900": data["key4" as keyof typeof data] >= 0.6
    }
  ];
};
</script>

<template>
  <DataTable :value="data">
    <div v-for="header in Object.keys(data[0])">
      <Column :key="header" :field="header">
        <template #header>
          {{ header }}
        </template>
        <template v-if="header === 'key4'" #body="slotProps">
          <div :class="formatterClass(slotProps.data)">
            {{ slotProps.data["key4"] }}
          </div>
        </template>
        <template v-else #body="{ data }">
          <div>
            {{ data[header] }}
          </div>
        </template>
      </Column>
    </div>
  </DataTable>
</template>

问题核心是动态列的嵌套方式错误：PrimeVue DataTable要求<Column>必须是它的直接子元素，不能用<div>等容器包裹循环的列组件，否则DataTable无法正确识别列配置，导致自定义body插槽失效。

修改后的代码如下：

<script setup lang="ts">
import DataTable from "primevue/datatable";
import Column from "primevue/column";

let data = Array.from({ length: 10 }, () => ({
  key1: Math.random(),
  key2: Math.random(),
  key3: Math.random(),
  key4: Math.random(),
}));

function formatterClass(data: {}) {
  return [
    "border-circle w-2rem h-2rem inline-flex justify-content-center align-items-center text-sm",
    {
      "bg-red-100 text-red-900": data["key4" as keyof typeof data] < 0.3,
      "bg-orange-100 text-orange-900": data["key4" as keyof typeof data] >= 0.3 && data["key4" as keyof typeof data] < 0.6,
      "bg-teal-100 text-teal-900": data["key4" as keyof typeof data] >= 0.6
    }
  ];
};
</script>

<template>
  <DataTable :value="data">
    <!-- 直接在Column上使用v-for，移除外层div -->
    <Column 
      v-for="header in Object.keys(data[0])" 
      :key="header" 
      :field="header"
    >
      <template #header>
        {{ header }}
      </template>
      <template v-if="header === 'key4'" #body="slotProps">
        <div :class="formatterClass(slotProps.data)">
          {{ slotProps.data["key4"] }}
        </div>
      </template>
      <template v-else #body="{ data }">
        <div>
          {{ data[header] }}
        </div>
      </template>
    </Column>
  </DataTable>
</template>

修改说明 #

• 移除了包裹<Column>的<div>，将v-for直接绑定到<Column>组件上，确保列是DataTable的直接子元素
• 保留原有条件格式化逻辑，key4列会根据值的区间显示对应的样式
• 其他列的动态渲染逻辑保持不变，依然自动绑定对应字段的值

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