elementui树状菜单tree_Vue+element ui树形菜单

效果图：

效果图.gif

源码：

Title

:data="menuItems"

show-checkbox

node-key="id"

:default-expanded-keys="expandedKeys"

:default-checked-keys="checkedKeys"

:props="defaultProps">

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'

}

},

});