vue多级多选菜单组件开发
13 浏览量
2020-09-01
08:38:47
上传
评论
收藏 98KB PDF 举报
vue多级多选菜单组件开发多级多选菜单组件开发
主要为大家分享了vue多级多选菜单组件开发案例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue多级多选菜单组件的制作方法，供大家参考，具体内容如下
要开发一个这样的多级多选菜单组件，功能是：
点击父标题栏可以打开与折叠子列表
点击父标题栏的勾选图标可以全选或取消子列表
点击子列表的勾选图标达到全选时，父标题栏的勾选图标自动勾选；反之，没达到全选时，父标题栏的勾选图标自动取消勾选
当所有父标题栏的勾选图标达到全选时，最底下那个全选框自动勾选；反之，没达到全选时，最底下那个全选框自动取消勾选
点击最底下那个全选框可以全选或取消全部的勾选图标
所以总结起来我们重点要
利用子列表勾选了哪些项来计算利用子列表勾选了哪些项来计算
出父标题与底下的全选框是自动勾选还是自动取消，并且父标题与底
下的全选框在选择变化时子列表应有什么变化。要做到以上，实现过程是：
构建我们构建我们model层数据层数据
datas : [
{
//用于判断是否展示子列表
isShowListItem : false,
//用于记录选中了哪些子项
selected : [],
//父标题
listTitle : "保利南悦湾",
//子列表
listItem : [
{
id : 1,
name : "李小龙"
},
{
id : 2,
name : "周星驰"
},
{
id : 3,
name : "周杰伦"
}
]
},
{
isShowListItem : false,
资源评论
