vue多级多选菜单组件开发


Posted in Javascript onSeptember 08, 2020

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

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数组里去

<input 
type="checkbox"
:value="item.id"
v-model="data.selected"
>

当父标题勾选变化时的处理方法
自动处理父标题勾选图标的变化
在HTML里,通过绑定:checked=”isTitleChecked(data)”,这时,每当其他项变化时,父标题都会调用一下isTitleChecked这个方法去判断一下这时自己的checked状态是true还是false,从而达到根据子项选中数目不同,父标题自动变化的目的。
通过@change=”changeTitleChecked(data,$event)”,每当父标题主动勾选或取消时触发
父标题HTML

<input :id="data.listTitle"
 class="list-input"
 type="checkbox"
 :checked="isTitleChecked(data)"
 @change="changeTitleChecked(data,$event)"
>

父标题JS

changeTitleChecked方法:当主动触发父标题的勾选图标时,如果这次触发chaeked的状态是true,则要把子列表项中没选中的全部选中,即将它们全部加进selected数组中;如果是false,则要把子列表项全部取消选中,即清空selected数组。
isTitleChecked方法:当子列表项全部选中时自动勾选父标题。

/**
* 当父标题状态变化时的处理方法
* @param data [当前项的data]
* @param event [当前项的event]
*/
changeTitleChecked : function (data,event) {
 if (event.target.checked === true) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 }else {
 data.selected = [];
 }
}
/**
* 判断父标题选择状态
* @param data [当前项的data]
* @returns {boolean}
*/
isTitleChecked : function (data) {
 var _selected = data.selected;
 var _listItem = data.listItem;
 // 验证selected中是否含有全部的item的id 如果是 证明title要选中
 return _listItem.every(function (item) {
 return _selected.indexOf(item.id) != -1;
 });
}

当底下的全选框变化时的处理方法
自动处理底下的全选框的变化

全选框HTML:

<input id="all-checked"
 type="checkbox"
 :checked="isAllChecked()"
 @change="changeAllChecked($event)"
>

全选框JS:

changeAllChecked方法:当主动触发全选框时,如果checked为true,则将全部的子项都放进selected数组里;反之则清空全部selected数组。
isAllChecked 方法:判断selected数组的长度是否等于全部子项数,如果相等,则全选框checked状态设为true。

/**
* 全选框change事件的回调处理方法
* @param event 
*/
changeAllChecked : function (event) {
 if (event.target.checked === true) {
 this.datas.forEach(function (data) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 })
}else {
 this.datas.forEach(function (data) {
 data.selected = [];
 })
 }
}

/**
* 判断全选框选择状态
* @returns {boolean}
*/
isAllChecked : function () {
 return this.datas.every(function (data) {
 return data.selected.length === data.listItem.length;
 });
}

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 #Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 #Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 #Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 #Javascript
vue插件tab选项卡使用小结
Oct 27 #Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 #Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 #Javascript
You might like
Smarty使用自定义资源的方法
2015/08/08 PHP
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
深入理解Python对Json的解析
2017/02/14 Python
python opencv实现运动检测
2018/07/10 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
学习十八大标语
2014/10/09 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
请病假条范文
2015/08/17 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书