PrimeVue DataTable 行颜色基于列项

Question

所以我有一个 PrimeVue DataTable，其结构如下：

<DataTable value="info">
  <Column header="Name" field="name" />
  <Column header="Desc." field="desc" />
  <Column header="Date" field="date" />
</DataTable>

DataTable 的值由数组“info”占据，该数组由从 API 提取的信息组成。我需要数据表中的某些行根据“info”中的属性“desc”显示为红色或绿色；我尝试通过以下方式来解决这个问题：

使用行样式

<DataTable value="info" :rowStyle="desc === 'Disconnected' ? 'color:red' : null">
  <Column header="Name" field="name" />
  <Column header="Desc." field="desc" />
  <Column header="Date" field="date" />
</DataTable>

我使用了 rowStyle 的多种变体，但我遇到的主要问题是在实现所述样式时访问 DataTable 中的变量。我想另一种方法可以是使用 ColumnGroup 然后分配一个<Row>值，然后使用相应的颜色更改对其进行修改？

有什么帮助吗？谢谢！

Answer 1

:rowStyle当您向or提供函数时:rowClass，第一个参数是 row's data，您可以使用它来决定颜色。

<DataTable :rowClass="({ desc }) => desc === 'Disconnected' ? 'text-red-500': null">
  ...
</DataTable>

类似地，在 a<Column>的#body槽内，您将找到data和field属性，它们可用于决定颜色：

<Column field="desc" header="Desc.">
  <template #body="{ field, data }">
    <div :class="data[field] === 'Disconnected' ? 'text-red-500' : null">
      {{ data[field] }}
    </div>
  </template>
</Column>

文档示例.

您可能想在内部编写函数<script>并在模板中引用它，如示例所示，而不是像我上面那样内联编写。两者都有效。