效果图：
效果图.gif
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tree
:data="menuItems"
show-checkbox
node-key="id"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
:props="defaultProps">
</el-tree>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
expandedKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],//展开的菜单项
checkedKeys: [9, 10],//选中的菜单项
menuItems: [{
id: 1,
label: '系统管理',
children: [{
id: 4,
label: '功能管理',
children: [{
id: 9,
label: '功能维护',
children: [{
id: 11,
label: '功能分配'
}]
}, {
id: 10,
label: '资源管理'
}]
}]
}, {
id: 2,
label: '账户管理',
children: [{
id: 5,
label: '用户管理'
}, {
id: 6,
label: '角色管理'
}]
}, {
id: 3,
label: '任务管理',
children: [{
id: 7,
label: '任务执行'
}, {
id: 8,
label: '执行记录'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
},
});
</script>
</html>
网友评论