-
Notifications
You must be signed in to change notification settings - Fork 3
Open
Description
I am new to Quasar, and Vue for that matter, and not much of a programmer...
I am having a real hard time working with a nested array in the QTable
component.
Consider this data structure:
rows: [
{
id: 1,
productgroup: "Product Group 1",
description: "Product Group 1 description",
products: [
{
product: "Product 1.1",
description: "Product 1.1 description",
price_small: "1.50",
price_default: "2.00",
price_large: "2.50"
},
{
product: "Product 1.2",
description: "Product 1.2 description",
price_small: "1.50",
price_default: "2.00",
price_large: "2.50"
},
]
},
{
id: 2,
productgroup: "Product Group 2",
description: "Product Group 2 description",
products: [
{
product: "Product 2.1",
description: "Product 2.1 description",
price_small: "1.50",
price_default: "2.00",
price_large: "2.50"
},
{
product: "Product 2.2",
description: "Product 2.2 description",
price_small: "1.50",
price_default: "2.00",
price_large: "2.50"
},
]
},
]
I'm trying to achieve a separate table for each product group with the product group as title and a description line underneath the title. And I want the products in that product group as rows in the table:
Product Group 1 Product Group 1 description (colspan = 5) |
---|
Expand | Products | Price small | Price default | Price large |
---|---|---|---|---|
- | Product 1.1 | $1.50 | $2.00 | $2.50 |
Product 1.1 description (colspan = 4) | ||||
+ | Product 1.2 | $1.50 | $2.00 | $2.50 |
Product Group 2 Product Group 2 description (colspan = 5) |
---|
Expand | Products | Price small | Price default | Price large |
---|---|---|---|---|
+ | Product 2.1 | $1.50 | $2.00 | $2.50 |
+ | Product 2.2 | $1.50 | $2.00 | $2.50 |
I can easily achieve this with QMarkupTable
(without the expansion unfortunately) using a v-for
and a nested v-for
, but I can't seem to get it right with QTable
.
Any help would be greatly appreciated.
Metadata
Metadata
Assignees
Labels
No labels