How to hide expansion-item arrow?



  • ff7db449-d9cf-459d-ae5d-4c6ded0186f0-image.png

    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>
    

    Image of q-item


Log in to reply