vue 多层双层全选_vue多级复杂列表展开/折叠,全选/分组全选实现
首先,来看下效果图
效果图.gif
在线体验地址:https://hxkj.vip/demo/multipleList/。温馨提示,打开之后按F12,使用手机模式食用,口味更佳!
可以看出,这个列表有三种展现形式:
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: [],//控制每级面板的选中状态
}
}
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(false)
this.isOpenItem[i].child.push(false)
this.setHeadColor(this.jobList[i].son[j].member, this.headColor);
}
}
}
3.为父级绑定事件
全选框HTML。使用@click="checkAll(index)"绑定全选事件,用于改变全选框的全选状态
:class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].group,'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].group}">
全选框JS。通过改变this.isSelectAll[index]中的group属性,来动态修改父级的选中状态。因为子级选项的数据this.selectPeople是由v-model绑定的,所有只需要对其进行增加和删除的操作,就可以改变子级每一项的选中状态
checkAll(index) {//父级的全选操作
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, 1);
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, 1);
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]);
}
}
}
}
4.通过子级改变父级的选中状态
子级HTML。需要注意的是,这里面绑定了两次stateChanged事件,只是参数不同。@click="stateChanged(index, j, k)"代表第二层级的子级。@click="stateChanged(index, i)"代表第一层级的子级。
:class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].child[j],'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].child[j]}">
{{second.name}}
:id="'check'+third.pid"
v-model="selectPeople"
:value="third">
{{ third.name }}{{third.userName}}
{{ third.job }}
v-model="selectPeople"
:value="people">
{{people.userName}}
{{ people.job }}
子级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);//改变第一级按钮的选中状态为选中状态
}
以上就是全部的实现过程,如果有不懂的,可以留言反馈。
vue 多层双层全选_vue多级复杂列表展开/折叠,全选/分组全选实现相关推荐
- vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
- vue 多层双层全选_vue2.0 实现全选和全不选
实现思路: 1. v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里 2 ...
- vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
- 基于Vue和Element-UI自定义分组以及分组全选Select 选择器
文章目录 基于Vue和Element-UI自定义分组以及分组全选Select 选择器 在这里插入图片描述 源代码 基于Vue和Element-UI自定义分组以及分组全选Select 选择器 上一篇博文 ...
- vue根据不同权限显示图片_vue多级权限组件的实现
首先实现递归checkbox的组件 假定,我们要实现的权限组件效果是这样的: 要实现点击系统,下面的都全选,点击基础功能,用户管理半选,系统半选.点击新增组织,如果基础功能没有选中,则基础功能改为选中 ...
- vue面试有哪些插件_vue 前端框架面试问题汇总
1 active-class是哪个组件属性.嵌套路由怎么定义? 解.vue-router 模块的router-link 组件 2 怎么定义vue-router动态路由?怎么获取传过来的动态参数? 解. ...
- element tree ui 全选_element-ui Tree之懒加载叶子节点设置半选效果
本来是不太想动的... 无可奈何,看到一句话[业精于勤, 荒于嬉]便还是动手写一写加深理解的同时给以后的自己留个备份吧... element-ui Tree组件如何给具有懒加载的tree设置半选效果? ...
- vue 多层表格嵌套
** vue 多层表格嵌套 ** 后台数据 `在这里插入代码片var table1 = [ {id: 1,name: "加强组织领导夯实基础工作",sore: "18分& ...
- yii 全选 php,yii2中gridview使用技巧小结(四)——全选等批量操作
在用gridview时,大家都注意到了,列表的开头有现成的复选框,这肯定是批量操作中用到的,今天就来介绍一下,gridview中的批量操作,简直简单的不行,效果图如下: 前端页面只需要改这几个地方即可 ...
- oracle性能优化求生指南_Vue项目性能优化--实践指南,网上最全最详细
点击上方 "程序员小乐"关注, 星标或置顶一起成长 第一时间与你相约 每日英文 Some happened could not forget, even forget also o ...
最新文章
- SDUT_2012省赛热身赛1
- python调用可执行文件
- Ubuntu14-04安装redis和php5-redis扩展
- 首届腾讯运维技术开放日!对外报名正式启动!
- cmake使用总结(转)---工程主目录CMakeList文件编写
- 工作322:uni-扩展运算符实现拼接合并操作
- ajax php接收不到数据库,PHP更新MySQL数据库与AJAX调用没有做任何事情
- Animoca Brands 旗下子公司 GAMEE 将于 4 月 2 日启动公募
- ★LeetCode(429)——N叉树的层序遍历(JavaScript)
- .NET文档生成工具ADB[更新至2.3]
- mac中sublime运行html,Mac系统下Sublime Text直接运行JavaScript调试控制台
- 借博客发泄一下对ExtJs的不满
- windows网络编程
- 钢构cad3.5免费版及命令索
- MPEG4 协议详解
- 有关不平衡学习与SMOTE算法
- 学习-Java循环while之求非负数之和
- python爬虫脚本 初级入门爬虫英雄联盟所有皮肤_用Python爬取英雄联盟(lol)全部皮肤...
- 美国的ACH支付体系
- 老员工的工资为什么会倒挂?
热门文章
- 求最短路的多种方法比较及应用
- mysql concat函数进行模糊查询
- Linux下安装、配置、启动Apache
- C#:String.Format数字格式化输出 {0:N2} {0:D2} {0:C2}...
- 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0” 提供程序解决办法
- Condition梳理和总结
- Web架构演变过程以及出现的问题
- java集合框架之LinkedList
- 找出唯一出现一次的数
- Win32++ Home Page