有条件地渲染图标

Question

在 Primefaces 的数据表中，我想有条件地在某个列中插入一个图标。

此列有两个值：1 或 0，如果为 1，则使用复选图标，如果为 0，则使用关闭图标。

我已经尝试过使用“rendered”、“style”、styleClass，但它对我不起作用。要么输出读取的值，要么不呈现任何内容（列为空）。

有什么办法吗？

我传递了一段代码：

<p:column headerText="Vota" width="30" filterBy="#{vot.estado}">
    <h:outputText value="#{vot.estado}" style="float:right #{vot.estado == 1 ? 'ui-icon-check' : 'ui-icon-close'}"/>
</p:column>

Answer 1

您在 style 属性中有图标信息，而它应该在 styleClass 属性中，并且您也需要通用 ui-icon 类。所以将您的代码更改为以下代码以使其工作

<p:column headerText="Vota" width="30" filterBy="#{vot.estado}">
    <h:outputText value="#{vot.estado}" style="float:right" styleClass="ui-icon #{vot.estado == 1 ? 'ui-icon-check' : 'ui-icon-close'}"/>
</p:column>

Answer 2

您可以将 rendered 属性与 outputText 本身一起使用，如下所示：

<p:column headerText="Vota" width="30" filterBy="#{vot.estado}">
     <h:outputText rendered="#{vot.estado == 1}" value="#{vot.estado}" style="float:right" styleClass="ui-icon-check"/>
     <h:outputText rendered="#{vot.estado != 1}" value="#{vot.estado}" style="float:right" styleClass="ui-icon-close"/>
</p:column>

Answer 3

<p:column headerText="Vota" width="30" filterBy="#{vot.estado}>
     <h:outputText value="#{vot.estado}"/>
     <i class="ui-icon #{vot.estado == 1 ? 'ui-icon-check' : 'ui-icon-close'}" style="display: inline-block"/>
</p:column>