layout
This commit is contained in:
parent
debcad9b4c
commit
a4ef50a3a5
3 changed files with 49 additions and 6 deletions
|
|
@ -3,8 +3,5 @@ export interface MenuItem {
|
|||
activeIcon: string;
|
||||
label: string;
|
||||
path?: string;
|
||||
children?: {
|
||||
label: string;
|
||||
path: string;
|
||||
}[];
|
||||
children?: MenuItem[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@ function defaultOpen(index: number) {
|
|||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<!-- เมนูย่อย -->
|
||||
<q-expansion-item
|
||||
v-if="menuItem.children && menuItem.children.length > 0"
|
||||
v-if="menuItem.children && menuItem.children.length !== 0"
|
||||
class="menuSub"
|
||||
expand-icon="mdi-chevron-down"
|
||||
expanded-icon="mdi-chevron-up"
|
||||
|
|
@ -327,7 +327,51 @@ function defaultOpen(index: number) {
|
|||
</template>
|
||||
|
||||
<!-- เมนูย่อย 1 ชั้น -->
|
||||
<div v-if="menuItem.children && menuItem.children.length > 0">
|
||||
<div v-for="(subMenu, i) in menuItem.children" :key="i">
|
||||
<q-expansion-item
|
||||
switch-toggle-side
|
||||
dense-toggle
|
||||
:label="subMenu.label"
|
||||
v-if="subMenu.children && subMenu.children.length > 0"
|
||||
class="expan2"
|
||||
dense
|
||||
>
|
||||
<q-item
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.path"
|
||||
:to="subMenu2.path"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400 subLabel"
|
||||
>{{ subMenu2.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
:key="subMenu.path"
|
||||
:to="subMenu.path"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">
|
||||
{{ subMenu.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
|
|
@ -413,7 +457,7 @@ function defaultOpen(index: number) {
|
|||
font-weight: 500;
|
||||
}
|
||||
.expan2 .q-item {
|
||||
padding-left: 10%;
|
||||
padding-left: 11%;
|
||||
}
|
||||
.subLabel {
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue