时间:2021-05-26
本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下
要开发一个这样的多级多选菜单组件,功能是:
点击父标题栏可以打开与折叠子列表
点击父标题栏的勾选图标可以全选或取消子列表
点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选;反之,没达到全选时,父标题栏的勾选图标自动取消勾选
当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选;反之,没达到全选时,最底下那个全选框自动取消勾选
点击最底下那个全选框可以全选或取消全部的勾选图标
所以总结起来我们重点要利用子列表勾选了哪些项来计算出父标题与底下的全选框是自动勾选还是自动取消,并且父标题与底下的全选框在选择变化时子列表应有什么变化。要做到以上,实现过程是:
构建我们model层数据
datas : [ { //用于判断是否展示子列表 isShowListItem : false, //用于记录选中了哪些子项 selected : [], //父标题 listTitle : "保利南悦湾", //子列表 listItem : [ { id : 1, name : "李小龙" }, { id : 2, name : "周星驰" }, { id : 3, name : "周杰伦" } ] }, { isShowListItem : false, selected : [], listTitle : "南庄万科城", listItem : [ { id : 4, name : "大魔王" }, { id : 5, name : "老妖怪" } ] }]记录子列表勾选了哪些项
子列表通过v-model=”data.selected”去双向绑定到selected数组中,当子列表项的checked发生变化时,就会把当前项的id记录到selected数组里去
当父标题勾选变化时的处理方法
自动处理父标题勾选图标的变化
在HTML里,通过绑定:checked=”isTitleChecked(data)”,这时,每当其他项变化时,父标题都会调用一下isTitleChecked这个方法去判断一下这时自己的checked状态是true还是false,从而达到根据子项选中数目不同,父标题自动变化的目的。
通过@change=”changeTitleChecked(data,$event)”,每当父标题主动勾选或取消时触发
父标题HTML
父标题JS
changeTitleChecked方法:当主动触发父标题的勾选图标时,如果这次触发chaeked的状态是true,则要把子列表项中没选中的全部选中,即将它们全部加进selected数组中;如果是false,则要把子列表项全部取消选中,即清空selected数组。
isTitleChecked方法:当子列表项全部选中时自动勾选父标题。
当底下的全选框变化时的处理方法
自动处理底下的全选框的变化
全选框HTML:
<input id="all-checked" type="checkbox" :checked="isAllChecked()" @change="changeAllChecked($event)">全选框JS:
changeAllChecked方法:当主动触发全选框时,如果checked为true,则将全部的子项都放进selected数组里;反之则清空全部selected数组。
isAllChecked 方法:判断selected数组的长度是否等于全部子项数,如果相等,则全选框checked状态设为true。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
公司有一个需求,实现一个多级的树形菜单,并且支持多选功能,实现这个功能之前,我在网上找了找,树形菜单很好找,但是支持多选功能并没有很合适的,所以没办法,只能自己
本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法。分享给大家供大家参考,具体如下:下拉菜单菜单:,dropdown(.dropup改变这个
本文实例为大家分享了Vue自定义多选组件使用的具体代码,供大家参考,具体内容如下子组件(选项卡)checkBoxCard.vue{{name}}exportde
本文实例讲述了vue实现的树形结构加多选框。分享给大家供大家参考,具体如下:前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组
本来实现多选单选这个功能,vue组件中在表单方面提供了一个v-model指令,非常的善解“猿”意,能把我们的多选单选功能很完美的且很强大得双向绑定起来,实现多选