PrimeNG - 使用headerColumnGroup对dataTable标头进行分组

Question

我必须对一些表头进行分组。我使用以下代码进行了测试，以了解 p-headerColumnGroup 是如何工作的。

<p-dataTable [value]="sales">
<p-headerColumnGroup>
    <p-row>
        <p-column header="Brand" rowspan="3"></p-column>
        <p-column header="Sale Rate" colspan="4"></p-column>
    </p-row>
    <p-row>
        <p-column header="Sales" colspan="2"></p-column>
        <p-column header="Profits" colspan="2"></p-column>
    </p-row>
    <p-row>
        <p-column header="Last Year"></p-column>
        <p-column header="This Year"></p-column>
        <p-column header="Last Year"></p-column>
        <p-column header="This Year"></p-column>
    </p-row>
</p-headerColumnGroup>

<p-column value="brand"></p-column>
<p-column field="lastYearSale"></p-column>
<p-column field="thisYearSale"></p-column>
<p-column field="lastYearProfit"></p-column>
<p-column field="thisYearProfit"></p-column>

<p-footerColumnGroup>
    <p-row>
        <p-column footer="Totals:" colspan="3"></p-column>
        <p-column footer="$506,202"></p-column>
        <p-column footer="$531,020"></p-column>
    </p-row>
</p-footerColumnGroup>

代码应该是正确的，但结果并不是我所期待的。我使用的是primeng 1.0.0-beta.3

Answer 1

PrimeNG现在可用1.0.0-rc.3。当我使用1.0.0-rc.3版本测试时，一切正常。在这里查看PrimeNG版本 https://www.npmjs.com/package/primeng并且您需要在index.html中添加<link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css" /> css文件