PrimeVue DataTable基于列项设置行颜色的问题

正确使用rowStyle的方式 #

你之前的写法核心问题是没有通过函数参数获取当前行的数据，rowStyle支持传入一个函数，函数参数就是当前行的条目，通过它就能访问到desc属性：

<DataTable :value="info" :rowStyle="(rowData) => rowData.desc === 'Disconnected' ? { color: 'red' } : { color: 'green' }">
  <Column header="Name" field="name" />
  <Column header="Desc." field="desc" />
  <Column header="Date" field="date" />
</DataTable>

如果逻辑更复杂，建议把样式逻辑抽离到方法中：

<script setup>
const getRowStyle = (rowData) => {
  if (rowData.desc === 'Disconnected') {
    return { color: 'red' };
  } else if (rowData.desc === 'Connected') {
    return { color: 'green' };
  }
  return {}; // 返回空对象使用默认样式
};
</script>

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

更推荐的rowClass方式 #

如果样式规则较多，用CSS类管理会更清晰，rowClass同样支持函数式用法：

<style scoped>
.disconnected-row {
  color: red;
}
.connected-row {
  color: green;
}
</style>

<script setup>
const getRowClass = (rowData) => {
  if (rowData.desc === 'Disconnected') {
    return 'disconnected-row';
  } else if (rowData.desc === 'Connected') {
    return 'connected-row';
  }
  return '';
};
</script>

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

关于ColumnGroup的说明 #

ColumnGroup和<Row>是用来构建复杂表头（比如合并表头行/列）的组件，和行数据的样式设置无关，不需要用这个方案实现行颜色需求。

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