vue多级多选菜单组件开发
|
本文实例为大家分享了vue多级多选菜单组件的制作方法，供大家参考，具体内容如下
要开发一个这样的多级多选菜单组件，功能是： 点击父标题栏可以打开与折叠子列表 点击父标题栏的勾选图标可以全选或取消子列表 点击子列表的勾选图标达到全选时，父标题栏的勾选图标自动勾选；反之，没达到全选时，父标题栏的勾选图标自动取消勾选 当所有父标题栏的勾选图标达到全选时，最底下那个全选框自动勾选；反之，没达到全选时，最底下那个全选框自动取消勾选 点击最底下那个全选框可以全选或取消全部的勾选图标 所以总结起来我们重点要 构建我们model层数据 记录子列表勾选了哪些项 子列表通过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： 全选框JS： changeAllChecked方法：当主动触发全选框时，如果checked为true，则将全部的子项都放进selected数组里；反之则清空全部selected数组。 isAllChecked 方法：判断selected数组的长度是否等于全部子项数，如果相等，则全选框checked状态设为true。 /**
本文已被整理到了《》，欢迎大家学习阅读。 关于vue.js组件的教程，请大家点击专题进行学习。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
