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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
asp 取文本框名称代码
Dec 02 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 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入门基础之php代码写法
2011/12/30 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
js随机生成一个验证码
2017/06/01 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
python学习手册中的python多态示例代码
2014/01/21 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
初中英语课后反思
2014/04/25 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
收银员岗位职责范本
2015/04/07 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript