vue多级复杂列表展开,vue多级多选菜单组件开发_vue

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

首先,来看下效果图

图片 1效果图.gif在线体验地址:

要开发一个这样的多级多选菜单组件,功能是:

可以看出,这个列表有三种展现形式:

1.第一层级中包含直属子项和第二层级,其中第二层级里包含子项2.第一层级中只包含第二层级,第二层级里包含子项3.第一层级中只包含直属子项

点击父标题栏可以打开与折叠子列表点击父标题栏的勾选图标可以全选或取消子列表点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选;反之,没达到全选时,父标题栏的勾选图标自动取消勾选当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选;反之,没达到全选时,最底下那个全选框自动取消勾选点击最底下那个全选框可以全选或取消全部的勾选图标

接下来,再分析列表所实现的功能:

1.点击父级可以展开与折叠该直属子级;2.点击父级级的勾选图标可以全选或取消该层级下列的所有子项;3.点击子项达到该父级的全选状态时时,父级的勾选图标自动勾选;反之,没达到全选时,父级的勾选图标自动取消勾选;4.所有相同层级之间勾选状态的改变互不影响;

分析完了,紧接着就到了撸码时刻了。

所以总结起来我们重点要利用子列表勾选了哪些项来计算出父标题与底下的全选框是自动勾选还是自动取消,并且父标题与底下的全选框在选择变化时子列表应有什么变化。要做到以上,实现过程是:

1.首先构建我们所需要的数据结构。
data() { return { headColor: ['#1c71fb', '#f7aa47', '#00c182', '#ff6769', '#917ee6', '#2cb2eb'],//待选颜色 jobList: [{ "id": "2511", "name": "嫩江第一中学", "member": [{ "pid": "12058", "userName": "冷风", "job": "安全主任", "name": "冷风" }, { "pid": "12005", "userName": "周大龙", "job": "安全主任", "name": "大龙" }], "son": [{ "id": "2513", "name": "校领导", "member": [{ "pid": "12056", "userName": "凌凌", "job": "安全主任", "name": "凌凌" }, { "pid": "12039", "userName": "唐老师", "job": "安全主任", "name": "老师" }] }] }, { "id": "2510", "name": "黑龙江黑河市嫩江县教育局", "son": [{ "id": "2525", "name": "办公室 ", "member": [{ "pid": "12006", "userName": "张喵喵", "job": "安全主任", "name": "喵喵" }, { "pid": "12024", "userName": "张徳龙", "job": "老师", "name": "徳龙" }] }, { "id": "2524", "name": "局长部", "member": [{ "pid": "12015", "userName": "小组长", "job": "安全主任", "name": "组长" }, { "pid": "12025", "userName": "TSY", "job": "11", "name": "SY" }] }] }, { "id": "2545", "name": "城市之星2总部", "member": [{ "pid": "12076", "userName": "文明", "job": "前端开发工程师", "name": "文明" }, { "pid": "12077", "userName": "不文明", "job": "高级架构师", "name": "文明" }] }], //从后台获取的人员列表信息 selectPeople: [],//存储被选择的人员 isOpenItem: [],//控制每级面板的打开与折叠 isSelectAll: [],//控制每级面板的选中状态 }}

构建我们model层数据

2.初始化数据

初始化数据的主要目的。

1.根据数据来给头像设置随机颜色2.根据数据初始化一层级全选按钮状态3.根据数据初始化折叠面板折叠状态4.根据数据设置第二层级的选中状态

initData() {//数据初始化 //设置头像背景颜色 let len = this.jobList.length; for (let i = 0; i < len; i++) { this.setHeadColor(this.jobList[i].member, this.headColor); //根据数据初始化全选按钮状态 this.isSelectAll.push; this.$set(this.isSelectAll[i], 'group', false); this.$set(this.isSelectAll[i], 'child', []); //根据数据初始化折叠面板折叠状态 this.isOpenItem.push; this.$set(this.isOpenItem[i], 'group', false); this.$set(this.isOpenItem[i], 'child', []); //设置第二层级的状态 for (let j in this.jobList[i].son) { this.isSelectAll[i].child.push this.isOpenItem[i].child.push this.setHeadColor(this.jobList[i].son[j].member, this.headColor); } }}
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 : "老妖怪" } ] }]
3.为父级绑定事件

全选框HTML。使用@click="checkAll"绑定全选事件,用于改变全选框的全选状态

<div @click="checkAll" @click.stop> <i :></i></div>

全选框JS。通过改变this.isSelectAll[index]中的group属性,来动态修改父级的选中状态。因为子级选项的数据this.selectPeople是由v-model绑定的,所有只需要对其进行增加和删除的操作,就可以改变子级每一项的选中状态

checkAll {//父级的全选操作 this.$set(this.isSelectAll[index], 'group', !this.isSelectAll[index].group);//改变当前按钮的选中状态 if (!this.jobList[index].member && !this.jobList[index].son) { return } if (!this.isSelectAll[index].group) {// 从全选 =》 全不选 for (let key in this.isSelectAll[index].child) { // 移除所有第二层级子项的选中状态 this.$set(this.isSelectAll[index].child, key, false); } for (let i = 0, len = this.selectPeople.length; i < len; i++) { if (!this.selectPeople[i]) { //删除干净了 return } for (let k in this.jobList[index].son) {//循环删除有部门的人员 for (let j in this.jobList[index].son[k].member) { if (this.selectPeople[i] && this.selectPeople[i].pid == this.jobList[index].son[k].member[j].pid) { this.selectPeople.splice; i--; break; } } } for (let j in this.jobList[index].member) {//循环删除没有部门的人员 if (this.selectPeople[i] && this.selectPeople[i].pid == this.jobList[index].member[j].pid) { this.selectPeople.splice; i--; break; } } } } else {// 从全不选 =》 全选 for (let key in this.isSelectAll[index].child) { // 给所有第二层级子项添加选中状态 this.$set(this.isSelectAll[index].child, key, true); } for (let i in this.jobList[index].member) {//循环添加没有部门的人员 if (this.selectPeople.includes(this.jobList[index].member[i])) { //如果已经存在,就不用再进行添加 continue; } this.selectPeople.push(this.jobList[index].member[i]); } for (let i in this.jobList[index].son) {//循环添加有部门的人员 for (let j in this.jobList[index].son[i].member) { if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) { //如果已经存在,就不用再进行添加 continue; } this.selectPeople.push(this.jobList[index].son[i].member[j]); } } }}

记录子列表勾选了哪些项子列表通过v-model=”data.selected”去双向绑定到selected数组中,当子列表项的checked发生变化时,就会把当前项的id记录到selected数组里去

4.通过子级改变父级的选中状态

子级HTML。需要注意的是,这里面绑定了两次stateChanged事件,只是参数不同。@click="stateChanged(index, j, k)"代表第二层级的子级。@click="stateChanged"代表第一层级的子级。

<ul v-show="isOpenItem[index] && isOpenItem[index].group"> <div v-for=" in item.son" :key="second.id"> <div @click="checkSecondItem" > <div @click="checkSecondAll" @click.stop> <i :></i> </div> {{second.name}} </div> <ul v-show="isOpenItem[index] && isOpenItem[index].child[j]"> <li v-for=" in second.member" :key="third.pid"> <input @click="stateChanged(index, j, k)" type="checkbox" name="school" : v-model="selectPeople" :value="third"> <label :for="'check'+third.pid"> <div :style="{ background: third.headColor }">{{ third.name }}</div> <div > <p > {{third.userName}} </p> <p >{{ third.job }}</p> </div> </label> </li> </ul> </div> <li v-for=" in item.member" :key="people.pid"> <input @click="stateChanged" type="checkbox" name="school" : v-model="selectPeople" :value="people"> <label :for="'check'+people.pid"> <div :style="{ background: people.headColor }">{{ people.name }}</div> <div > <p > {{people.userName}} </p> <p >{{ people.job }}</p> </div> </label> </li></ul>

子级JS。其中,stateChanged函数,通过传入的参数不同来判断当前属于哪一层级的数据。setFirstLevelChecked函数,通过判断所有子级选项的选中状态来给第一层级添加选中状态。

stateChanged(index, i, j) { if (j !== undefined) { //如果有j值,代表第三层级数据 if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) {//点击之前为选中状态 this.$set(this.isSelectAll[index].child, i, false);//改变父级按钮的选中状态为非选中状态 this.$set(this.isSelectAll[index], 'group', false);//改变顶级按钮的选中状态为非选中状态 } else {//点击之前为非选中状态 //给父级添加选中状态 for (let k = 0; k < this.jobList[index].son[i].member.length; k++) { if (!this.selectPeople.includes(this.jobList[index].son[i].member[k]) && this.jobList[index].son[i].member[k] != this.jobList[index].son[i].member[j]) {//只要有其中一个未选中,就跳出循环,不给父级添加选中状态 return false } } this.$set(this.isSelectAll[index].child, i, true);//改变父级按钮的选中状态为选中状态 this.setFirstLevelChecked(index, this.jobList[index].son[i].member[j]);//给第一级添加选中状态 } } else {//没有j值,第二层级数据 if (this.selectPeople.includes(this.jobList[index].member[i])) {//点击之前为选中状态 this.$set(this.isSelectAll[index], 'group', false);//改变父级按钮的选中状态为非选中状态 } else {//点击之前为非选中状态 this.setFirstLevelChecked(index, this.jobList[index].member[i]);//给第一级添加选中状态 } }},setFirstLevelChecked(index, data) {//给第一级添加选中状态 for (let k in this.jobList[index].member) { if (!this.selectPeople.includes(this.jobList[index].member[k]) && data != this.jobList[index].member[k]) {//只要有其中一个未选中,就跳出循环,不给父级添加选中状态 return false } } for (let i in this.jobList[index].son) {//循环添加有部门的人员 for (let j in this.jobList[index].son[i].member) { if (!this.selectPeople.includes(this.jobList[index].son[i].member[j]) && data != this.jobList[index].son[i].member[j]) { //如果已经存在,就不用再进行添加 return false } } } this.$set(this.isSelectAll[index], 'group', true);//改变第一级按钮的选中状态为选中状态}

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

以上就是全部的实现过程,如果有不懂的,或者需要demo的,可以留言反馈。

转载请注明出处:

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

/*** 当父标题状态变化时的处理方法* @param data [当前项的data]* @param event [当前项的event]*/changeTitleChecked : function  { if (event.target.checked === true) { data.listItem.forEach { data.selected.indexOf === -1 && data.selected.push }else { data.selected = []; }}

/*** 判断父标题选择状态* @param data [当前项的data]* @returns {boolean}*/isTitleChecked : function  { var _selected = data.selected; var _listItem = data.listItem; // 验证selected中是否含有全部的item的id 如果是 证明title要选中 return _listItem.every { return _selected.indexOf;}

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

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

/*** 全选框change事件的回调处理方法* @param event */changeAllChecked : function  { if (event.target.checked === true) { this.datas.forEach { data.listItem.forEach { data.selected.indexOf === -1 && data.selected.push}else { this.datas.forEach { data.selected = []; }) }}/*** 判断全选框选择状态* @returns {boolean}*/isAllChecked : function () { return this.datas.every { return data.selected.length === data.listItem.length; });}

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

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

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

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:vue多级复杂列表展开,vue多级多选菜单组件开发_vue

相关阅读