Vue无限极树形菜单

原创已于 2025-06-27 15:09:31 修改 · 511 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-09 16:20:59 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue无限极树形菜单</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.tree-menu {
list-style: none;
padding-left: 20px;
}
.tree-menu li {
margin: 5px 0;
position: relative;
}
.tree-node {
display: flex;
align-items: center;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.tree-node:hover {
background-color: #f0f0f0;
}
.tree-node.has-children:before {
content: "+";
display: inline-block;
width: 15px;
height: 15px;
text-align: center;
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 3px;
line-height: 13px;
font-size: 12px;
}
.tree-node.has-children.expanded:before {
content: "-";
}
.tree-node-content {
flex: 1;
}
.tree-children {
display: none;
padding-left: 20px;
}
.tree-children.expanded {
display: block;
}
</style>
</head>
<body>
<div id="app">
<h2>无限极树形菜单</h2>
<ul class="tree-menu">
<tree-node
v-for="node in treeData"
:key="node.id"
:node="node"
@toggle="toggleNode"
></tree-node>
</ul>
</div>

// Vue实例
new Vue({
el: '#app',
data: {
treeData: [
{
id: 1,
name: '根节点1',
expanded: true,
children: [
{
id: 2,
name: '子节点1-1',
expanded: false,
children: [
{
id: 3,
name: '子节点1-1-1',
expanded: false,
children: []
},
{
id: 4,
name: '子节点1-1-2',
expanded: false,
children: [
{
id: 5,
name: '子节点1-1-2-1',
expanded: false,
children: []
}
]
}
]
},
{
id: 6,
name: '子节点1-2',
expanded: false,
children: []
}
]
},
{
id: 7,
name: '根节点2',
expanded: false,
children: [
{
id: 8,
name: '子节点2-1',
expanded: false,
children: []
},
{
id: 9,
name: '子节点2-2',
expanded: false,
children: [
{
id: 10,
name: '子节点2-2-1',
expanded: false,
children: []
},
{
id: 11,
name: '子节点2-2-2',
expanded: false,
children: []
}
]
}
]
}
]
},
methods: {
toggleNode(node) {
node.expanded = !node.expanded;
}
}
});
</script>
</body>
</html>