Visualforce组件合计栏不显示仅空白行问题排查求助

Visualforce组件中的Grand Total合计区域仅显示空白行，无法正常渲染合计数据。尝试过调整footer位置、不使用footer等方式，结果要么合计栏变成独立表格，要么因为不属于表格组无法打印。

代码示例 #

<apex:component id="CPQQuoteLines" controller="CPQQuoteLinesEmailTemplateController" access="global">
    <style type="text/css">
        .bordered-table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 100%;
        }

        .bordered-table th, .bordered-table td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
            background-color: #f2f2f2; /* Light gray background for header */
            white-space: nowrap;
        }

        .bordered-table th {
            background-color: #90d5ff; /* Blue background for header */
            color: black; /* White text for header */
        }

        /* Footer Row Styling */
        .footer-row td {
            font-weight: bold;
            background-color: #f9f9f9;
        }
    </style>

    <apex:attribute name="quoteIdAttr" description="CPQ Quote Id" type="ID" assignTo="{!srcQuoteId}" />

    <!-- Render the table -->
    <apex:dataTable value="{!quoteLines}" var="line" id="theTable" rowClasses="odd,even" width="100%" styleClass="bordered-table">
        <apex:column headerValue="Items">
            <apex:outputText value="{!line.SBQQ__Product__r.Name}" />
        </apex:column>
        <apex:column headerValue="Contractual Delivery Date">
            <apex:outputText value="{!line.SBQQ__Quote__r.SBQQ__Opportunity2__r.Contract_Delivery_Date__c}" />
        </apex:column>
        <apex:column headerValue="Market Share Type">
            <apex:outputText value="{!line.SBQQ__Quote__r.SBQQ__Opportunity2__r.Market_Share_Type__c}" />
        </apex:column>
        <apex:column headerValue="Sales Price">
            <apex:outputText value="{0, number, currency}">
                <apex:param value="{!line.SBQQ__PackageListTotal__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Share of Deal">
            <apex:outputText value="{0, number, percent}">
                <apex:param value="{!line.SBQQ__PackageListTotal__c / totalSalesPrice}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Target Price">
            <apex:outputText value="{0, number, currency}">
                <apex:param value="{!line.Component_Target_Price__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Price Performance">
            <apex:outputText value="{0, number, percent}">
                <apex:param value="{!line.SBQQ__PackageListTotal__c / line.Component_Target_Price__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="RAM Value">
            <apex:outputText value="{0, number, currency}">
                <apex:param value="{!line.Rev_Total__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Ram Margin %">
            <apex:outputText value="{0, number, percent}">
                <apex:param value="{!(line.Rev_Total__c - line.SBQQ__PackageCost__c) / line.Rev_Total__c}" />
            </apex:outputText>
        </apex:column>

        <!-- Footer Row -->
        <apex:facet name="footer">
            <tr>
                <td><strong>Grand Total</strong></td>
                <td></td>
                <td></td>
                <td>
                    <apex:outputText value="{0, number, currency}">
                        <apex:param value="{!totalSalesPrice}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, percent}">
                        <apex:param value="{!totalShareOfDeal}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, currency}">
                        <apex:param value="{!totalTargetPrice}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, percent}">
                        <apex:param value="{!totalPackagePerformance}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, currency}">
                        <apex:param value="{!totalRAMValue}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, percent}">
                        <apex:param value="{!totalRamMargin}" />
                    </apex:outputText>
                </td>
            </tr>
        </apex:facet>
    </apex:dataTable>
</apex:component>

问题截图 #

• 合计变量未正确赋值：控制器中的totalSalesPrice、totalTargetPrice等合计字段，可能没有在获取quoteLines的同时完成计算，或者计算逻辑存在错误（比如未处理null值、循环累加遗漏），导致前端绑定的变量值为null或空，渲染时显示空白。
• DataTable Footer用法错误：Visualforce的<apex:dataTable>的footer facet是针对每一列的，而非整个表格的底部行。直接在dataTable根节点下添加整行的footer，不符合组件的渲染规则，会导致DOM结构异常，最终显示空白行。正确的做法是给每列单独设置footer，或者改用<apex:pageBlockTable>来实现整行footer。
• CSS样式覆盖：自定义的.bordered-table td样式给所有单元格设置了background-color: #f2f2f2，而你定义的.footer-row样式并未应用到footer的<tr>上（代码里没加class="footer-row"），导致footer单元格背景色与内容可能视觉上重合，看起来像空白。
• 空数据场景未处理：如果quoteLines列表为空，dataTable可能不会渲染footer区域，或者渲染的footer无法正确绑定合计变量（因为变量未被计算）。

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