vue多级复杂列表展开/折叠及全选/分组全选实现


Posted in Javascript onNovember 05, 2018

首先,来看下效果图

vue多级复杂列表展开/折叠及全选/分组全选实现

在线体验地址: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)"绑定全选事件,用于改变全选框的全选状态

<div class="checkGroup" @click="checkAll(index)" @click.stop>
    <i class="iconfont"
       :class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].group,'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].group}"></i>
</div>

全选框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)"代表第一层级的子级。

<ul class="item_second" v-show="isOpenItem[index] && isOpenItem[index].group">
  <div class="item_third" v-for="(second,j) in item.son" :key="second.id">
    <div @click="checkSecondItem(index, j)" class="item">
      <div class="checkGroup" @click="checkSecondAll(index, j)" @click.stop>
        <i class="iconfont"
          :class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].child[j],'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].child[j]}"></i>
      </div>
      {{second.name}}
    </div>
    <ul class="item_fourth" v-show="isOpenItem[index] && isOpenItem[index].child[j]">
      <li v-for="(third,k) in second.member" :key="third.pid">
        <input @click="stateChanged(index, j, k)" type="checkbox" name="school"
            :id="'check'+third.pid"
            v-model="selectPeople"
            :value="third">
        <label class="content-wrap" :for="'check'+third.pid">
          <div class="item_img" :style="{ background: third.headColor }">{{ third.name }}</div>
          <div class="content">
            <p class="content_name">
              {{third.userName}}
            </p>
            <p class="vice">{{ third.job }}</p>
          </div>
        </label>
      </li>
    </ul>
  </div>
  <li v-for="(people,i) in item.member" :key="people.pid">
    <input @click="stateChanged(index,i)" type="checkbox" name="school" :id="'check'+people.pid"
        v-model="selectPeople"
        :value="people">
    <label class="content-wrap" :for="'check'+people.pid">
      <div class="item_img" :style="{ background: people.headColor }">{{ people.name }}</div>
      <div class="content">
        <p class="content_name">
          {{people.userName}}
        </p>
        <p class="vice">{{ 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);//改变第一级按钮的选中状态为选中状态
}

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

Javascript 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
浅谈Vue数据响应
Nov 05 #Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 #Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 #Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 #Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 #Javascript
vue router的基本使用和配置教程
Nov 05 #Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
python中with用法讲解
2020/02/07 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
C语言笔试题
2014/09/04 面试题
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
教育局长自荐信范文
2013/12/22 职场文书
元旦活动感言
2014/03/08 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL