v-list -group未与list中的v-list-item对齐

问题描述

我有一个带有列表的导航抽屉，其中部分项目具有子列表。 我不知道为什么我的v-list-group与列表项没有正确对齐。 我尝试使用class="v-list-item"进行修复，但没有成功 “首页”和“统计信息”项目是v-list-item，“报告”是v-list-group，其中包含v-list-item

相关模板：

    <v-navigation-drawer
      v-model="sidebarMenu"
      app
      floating
      :permanent="sidebarMenu"
      :mini-variant.sync="mini"
      color="grey darken-4"
    >
      <v-list dense>
        <v-list-item>
          <v-list-item-action>
            <v-icon @click.stop="sidebarMenu = !sidebarMenu">mdi-chevron-left</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list>
        <div v-for="(link,i) in links" :key="link.title">
          <v-list-item v-if="!link.subLinks" :key="i" :to="link.href" class="v-list-item">
            <v-list-item-icon>
              <v-icon color="primary">{{ link.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title class="primary--text">
                {{
                link.title
                }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-list-group v-else :key="link.title" no-action>
            <template v-slot:activator>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon color="primary">{{ link.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                  <v-list-item-title class="primary--text">
                    {{
                    link.title
                    }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>

            <v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
              <v-list-item-content>
                <v-list-item-title class="primary--text">
                  {{
                  sublink.title
                  }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </div>
      </v-list>
    </v-navigation-drawer>

脚本：

data: () => ({
    links: [
      {
        title: "Home",href: "/",icon: "mdi-home-outline"
      },{
        icon: "mdi-file-chart",title: "Reports",subLinks: [
          {
            title: "Sales",href: "/sales"
          },{
            title: "Orders",href: "/orders"
          },{
            title: "Inventory",href: "/inventory"
          }
        ]
      },{
        title: "Statistics",href: "/statistics",icon: "mdi-chart-bar"
      }
    ],

编辑：

按照@IVO GElov的建议，我将v-list更改为v-tree-view， 看起来确实更好。

我现在的小问题是我必须单击文本本身进行路由。 如何使所有路由器链接行都可点击？

<v-treeview :items="items" open-on-click item-key="name" activatable class="primary--text">
        <template slot="label" slot-scope="props">
          <v-icon color="primary" v-text="props.item.icon" class="pr-2"></v-icon>
          <router-link
            style="text-decoration: none"
            :to="props.item.href"
            v-if="props.item.href"
          >{{ props.item.name }}</router-link>
          <span v-else>{{ props.item.name }}</span>
        </template>
      </v-treeview>

<script>
export default {
  data: () => ({
    items: [
      {
        id: 0,name: "Home",icon: "mdi-home-outline",href: "/"
      },{
        id: 1,name: "Reports",icon: "mdi-file-chart",children: [
          {
            id: 2,name: "Sales",{
            id: 3,name: "Orders",{
            id: 4,name: "Inventory",href: "/inventory"
          }
        ]
      }
    ]
  })
};
</script>

解决方法

也许您可以像创建一个空的“ v-list-item-icon”标签一样快速进行黑客攻击，以便在标题之前占用一些空间？

<v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
    <v-list-item-icon></v-list-item-icon>  //Empty Icon

    <v-list-item-content>
        <v-list-item-title class="primary--text">
           {{ sublink.title }}
        </v-list-item-title>
    </v-list-item-content>
</v-list-item>

,

我尝试添加一个列表项而不是路由器链接，它可以工作，就像这样。

   <v-treeview :items="items" open-on-click item-key="name" activatable>
    <template slot="label" slot-scope="props">
       <v-list-item link :href="props.item.href" v-text="props.item.name">
       </v-list-item>
    </template>
  </v-treeview>