How to hide expansion-item arrow?
-
these items are links.
-
codes
<template> <q-layout view="lHh Lpr lFf"> <q-header elevated class="glossy"> <q-toolbar> <q-btn flat dense round @click="leftDrawerOpen = !leftDrawerOpen" aria-label="Menu" icon="menu" /> <q-toolbar-title>Quasar App</q-toolbar-title> <div>Quasar v{{ $q.version }}</div> </q-toolbar> </q-header> <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-2"> <q-list> <q-expansion-item expand-separator icon="mail" :label="menu.menu_name" default-opened v-bind:key="menu.id" v-for="menu in menus" :to="menu.children?null:menu.path" > <q-expansion-item :header-inset-level="1" expand-separator v-bind:key="children_menu.id" v-for="children_menu in menu.children" :to="children_menu.path" :label="children_menu.menu_name" ></q-expansion-item> </q-expansion-item> </q-list> </q-drawer> <q-page-container></q-page-container> </q-layout> </template> <script> export default { name: "LayoutDefault", components: {}, data() { return { menus: [ { id: 6, parent_id: 0, menu_name: "机构管理", menu_icon: "", order: 100, path: "company", }, { id: 1, parent_id: 0, menu_name: "RBAC权限管理", menu_icon: "", order: 200, path: "", children: [ { id: 2, parent_id: 1, menu_name: "用户管理", menu_icon: "", order: 100, path: "rbac/users", }, { id: 4, parent_id: 1, menu_name: "角色管理", menu_icon: "", order: 200, path: "rbac/roles", }, { id: 3, parent_id: 1, menu_name: "权限管理", menu_icon: "", order: 300, path: "rbac/permissions", }, { id: 5, parent_id: 1, menu_name: "菜单管理", menu_icon: "", order: 400, path: "rbac/menus", }, ], }, ], leftDrawerOpen: false, }; }, }; </script> <style> </style>
-
why use an expansion item when you don’t want an expansion item? I used a Q-Item instead of q-expansion item for the second level.
<template> <q-layout view="lHh Lpr lFf"> <q-header elevated class="glossy"> <q-toolbar> <q-btn flat dense round @click="leftDrawerOpen = !leftDrawerOpen" aria-label="Menu" icon="menu" /> <q-toolbar-title>Quasar App MVD</q-toolbar-title> <div>Quasar v{{ $q.version }}</div> </q-toolbar> </q-header> <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-2"> <q-list> <q-expansion-item expand-separator icon="mail" :label="menu.menu_name" default-opened v-bind:key="menu.id" v-for="menu in menus" :to="menu.children?null:menu.path" > <q-item :inset-level="1" clickable tag="a" :to="children_menu.path" active-class="my-menu-link" v-for="children_menu in menu.children" v-bind:key="children_menu.id" > <q-item-section> <q-item-label class="text-weight-medium">{{children_menu.menu_name}}</q-item-label> </q-item-section> </q-item> <!-- <q-expansion-item--> <!-- :header-inset-level="1"--> <!-- expand-separator--> <!-- v-bind:key="children_menu.id"--> <!-- v-for="children_menu in menu.children"--> <!-- :to="children_menu.path"--> <!-- :label="children_menu.menu_name"--> <!-- ></q-expansion-item>--> </q-expansion-item> </q-list> </q-drawer> </q-layout> </template> <script> export default { name: 'LayoutDefault', components: {}, data () { return { menus: [ { id: 6, parent_id: 0, menu_name: '机构管理', menu_icon: '', order: 100, path: 'company' }, { id: 1, parent_id: 0, menu_name: 'RBAC权限管理', menu_icon: '', order: 200, path: '', children: [ { id: 2, parent_id: 1, menu_name: '用户管理', menu_icon: '', order: 100, path: 'rbac/users' }, { id: 4, parent_id: 1, menu_name: '角色管理', menu_icon: '', order: 200, path: 'rbac/roles' }, { id: 3, parent_id: 1, menu_name: '权限管理', menu_icon: '', order: 300, path: 'rbac/permissions' }, { id: 5, parent_id: 1, menu_name: '菜单管理', menu_icon: '', order: 400, path: 'rbac/menus' } ] } ], leftDrawerOpen: false } } } </script> <style> </style>
