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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
Javascript中的async awai的用法
May 17 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 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
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP写日志的实现方法
2014/11/05 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
js实现返回顶部效果
2017/03/10 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
思想汇报范文
2013/11/04 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
美术教师岗位职责
2014/03/18 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS