最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - PrimeVue DataTable Row Color based off of Column Item - Stack Overflow

programmeradmin2浏览0评论

So I have a PrimeVue DataTable that is structured like so:

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

The value of the DataTable is occupied by the array, "info", which consists of information pulled from an API. I need certain rows within the DataTable to appear either red or green based on the property "desc" within "info"; I have attempted to go about it in these ways:

Using rowStyle

<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>

I have used multiple variations of rowStyle, but the primary issue I am having is accessing variables within the DataTable when implementing said style. I suppose another method could be using a ColumnGroup and then assigning a <Row> value, then modifying it with the respective color change?

Any help? Thanks!

So I have a PrimeVue DataTable that is structured like so:

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

The value of the DataTable is occupied by the array, "info", which consists of information pulled from an API. I need certain rows within the DataTable to appear either red or green based on the property "desc" within "info"; I have attempted to go about it in these ways:

Using rowStyle

<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>

I have used multiple variations of rowStyle, but the primary issue I am having is accessing variables within the DataTable when implementing said style. I suppose another method could be using a ColumnGroup and then assigning a <Row> value, then modifying it with the respective color change?

Any help? Thanks!

Share Improve this question edited Oct 6, 2022 at 19:19 guyman asked Oct 6, 2022 at 16:57 guymanguyman 2071 gold badge5 silver badges17 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 8

When you provide a function to :rowStyle or :rowClass, the first argument is row's data, which you can use to decide the color.

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

Similarly, inside a <Column>'s #body slot, you will find data and field properties, which can be used to decide the color:

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

Docs example.

You might want to write the function inside <script> and reference it in template, as shown in the example, instead of writing it inline, as I did above. Both work.

发布评论

评论列表(0)

  1. 暂无评论