0

我开始使用 Primeng 来获取我的应用所需的一些 UI。当前使用的是数据表。我正在尝试创建一个有条件样式的仪表板。以下是我需要实现但无法显示样式的快照。 在此处输入图像描述

这是我的代码。代码仍然没有考虑条件，但我什至无法让趋势列中的单元格具有不同的颜色。这是我使用primeng beta 10的试验：

<p-dataTable [value]="perfData" >
            <p-column field="Title" header="Title"></p-column>
            <p-column field="Curr Test" header="Curr Test"></p-column>
            <p-column field="Trend" header="Trend" [style.background-color]="blue">

            </p-column>
            <p-column field="Prev Test" header="Prev Test"></p-column>

 </p-dataTable>

我什至尝试了 primefaces 演示的模板模式，但没有运气：

<p-dataTable [value]="perfData" >
            <p-column field="Title" header="Title"></p-column>
            <p-column field="Curr Test" header="Curr Test"></p-column>
            <p-column field="Trend" header="Trend">
                <template let-col let-row="rowData">
                    <span [style.background-color]="blue">{{row[col.field]}}</span>
                </template>
            </p-column>
            <p-column field="Prev Test" header="Prev Test"></p-column>
 </p-dataTable>

这两个代码都为我的表格生成了相同的以下快照。我究竟做错了什么？

PS：我正在使用 webpack，并在我的 index html 中包含了 primeui 所需的 css 文件，如下所示：

<link rel="stylesheet" type="text/css" href="./css/primeui-ng-all.min.css" />
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="./css/theme.css" />

谢谢你的帮助！

在此处输入图像描述

4

2 回答 2

1

我遇到过同样的问题。我能够以这种方式修复它。

<p-dataTable [value]="perfData" >
     <p-column field="Title" header="Title"></p-column>
     <p-column field="Curr Test" header="Curr Test"></p-column>
     <p-column field="Trend" header="Trend" [style]="{'background-color':'blue'}">
     </p-column>
     <p-column field="Prev Test" header="Prev Test"></p-column>
</p-dataTable>
于 2016-08-09T05:48:01.073 回答
1

如果您不想要标题颜色，请尝试这种方式。

<p-dataTable [value]="perfData" >
   <p-column field="Title" header="Title"></p-column>
   <p-column field="Curr Test" header="Curr Test"></p-column>
   <p-column field="Trend" header="Trend">
     <template let-col let-row="rowData">
        <div [style.background-color]="(row[col.field] == header) ? 'none' : 'blue'">
          <span>{{ row[col.field] }}</span>
        </div>
     </template>
   </p-column>
   <p-column field="Prev Test" header="Prev Test"></p-column>
</p-dataTable>

您应该以适合单元格的方式修改 div 标签的 CSS。尝试使用负边距。希望这可以帮助！

于 2016-08-11T07:09:28.613 回答