PrimeNG 数据表行跨度示例

Question

我正在使用 PrimeNG 数据表。我想让一些行跨越表格内容中的几列。在标题 (http://www.primefaces.org/primeng/#/datatablegroup) 中有一个很好的示例，但我不确定如何在表格内容中执行此操作。行数将是动态的（有些可能有 Weather 和 Rain，其他可能有 Rain、Water Level 和 Streamflow）。这个可以吗？

visual for rowspan > 1

Answer 1

我遇到了同样的问题。我真的想不出一个原生解决方案，所以我这样做了。

<p-dataTable [value]="checkout.items" [footerRows]="footerRows">
        <p-column field="main_title" header="Items" styleClass="item-width">

            <template let-col let-mainVO="rowData">

                <tr><h4>{{mainVO[col.field].main_title}}</h4></tr>
                <tr *ngFor="let c of mainVO[col.field].childVO">
                    <td>{{c.title}}</td>
                    <td>{{c.price}}</td>
                </tr>
                <tr><h4>Discounts:</h4></tr>
                <tr *ngFor="let d of mainVO[col.field].discounts">
                    <td>{{d.title}}</td>
                    <td>{{d.price}}</td>
                </tr>
                </template>
        </p-column>
        <p-column field="quantity" header="Quantity"></p-column>
        <p-column field="price" header="Price"></p-column>
        <p-column field="action" header="Action">
            <template>
                <a href="javascript:void(0)">Delete</a>
            </template>
        </p-column>

    </p-dataTable>

这是我的 json：

 this.checkout =
        {
            Message: "CheckoutList",

            items: [
                {
                    mainVO:{

                        main_title: "Value Pack Combo",

                        childVO: [
                            {
                                title: "Financial e-Tutorial",
                                price: "$55"
                            },

                            {
                                title: "e-Tutorial",
                                price: "$75"
                            },
                            {
                                title: "Ratios e-Tutorial",
                                price: "$85"
                            },

                            {
                                title: "economics e-Tutorial",
                                price: "$95"
                            }
                        ],
                        discounts: [
                            {
                                title: "Discount price 1",
                                price: "$120"
                            },
                        ]
                    },

                    quantity: "1",

                    price: "300",
                    currency: "CAD"

                },
                {
                    mainVO:{

                        main_title: "Securities Pack Combo",

                        childVO: [
                        {
                            title: "atios e-Tutorial",
                            price: "$55"
                        },

                        {
                            title: "omicsrial",
                            price: "$75"
                        },
                        {
                            title: "e-Tutorial",
                            price: "$85"
                        },

                        {
                            title: "Micro Tutorial",
                            price: "$95"
                        }
                        ],
                        discounts: [
                        {
                            title: "Discount price 1",
                            price: "$120"
                        },
                        ]
                    },

                    quantity: "1",

                    price: "300",
                    currency:"CAD"
                },
            ],

        }