如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。