html手写vue多级选择框,vue多级多选菜单组件开发

本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下

要开发一个这样的多级多选菜单组件,功能是:

点击父标题栏可以打开与折叠子列表

点击父标题栏的勾选图标可以全选或取消子列表

点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选;反之,没达到全选时,父标题栏的勾选图标自动取消勾选

当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选;反之,没达到全选时,最底下那个全选框自动取消勾选

点击最底下那个全选框可以全选或取消全部的勾选图标

所以总结起来我们重点要利用子列表勾选了哪些项来计算出父标题与底下的全选框是自动勾选还是自动取消,并且父标题与底下的全选框在选择变化时子列表应有什么变化。要做到以上,实现过程是:

构建我们model层数据

datas : [

{

//用于判断是否展示子列表

isShowListItem : false,

//用于记录选中了哪些子项

selected : [],

//父标题

listTitle : "保利南悦湾",

//子列表

listItem : [

{

id : 1,

name : "李小龙"

},

{

id : 2,

name : "周星驰"

},

{

id : 3,

name : "周杰伦&

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值