湖北省勘察设计协会网站/百度公司高管排名

一、需求分析：
1.部门按照树形结构展示一级、二级目录；
2.当一级目录选中时，二级目录自动全选；

3.当二级目录全选时，一级目录自动选中，反之，有一个二级没选中，一级就不被选中；

4.添加全选功能。

二、上代码
备注：此处引用了vant组件的复选框功能。

<template><div id="tree"><div @click="checkAllFun"><van-checkbox-group v-model="radio" class="checkAll" ><van-checkbox name="1" checked-color="#ee0a24"><div style="color:#E03716">全选</div></van-checkbox></van-checkbox-group></div><div class="checkThem"><div v-for="item in firstAllList" :key="item.id"><!-- 一级的 --><div class="check_checkThem_first flex-h flex-vh-center"><img src="open.png" class="img" v-show="firstFlag==item.id" @click.stop="firstChack('up',item)"><img src="down.png" class="img" v-show="firstFlag!=item.id" @click.stop="firstChack('down',item)"><van-checkbox-group v-model="firstList"><van-checkbox :name="item.id" checked-color="#ee0a24" @click="firstClick(item.id)">{{item.name}}</van-checkbox></van-checkbox-group></div><!-- 二级的 --><div class="check_checkThem_second flex-h flex-vh-center" v-show="secondFlag==item.id"v-for="them in item.children" :key="them.id"><van-checkbox-group v-model="secondList"><van-checkbox :name="them.id" checked-color="#ee0a24" @click="secondClick">{{them.name}}</van-checkbox></van-checkbox-group></div></div></div></div>
</template>
<script>
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
import {get} from "@/request/axios.js";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
export default {data() {return {radio: [],//全选的firstList:[],//一级选中的firstListCopY:[],//记录一级选中的条数secondList:[],//二级选中的firstFlag:'',//一级secondFlag:'',//二级firstAllList:[{name:'哈哈',id:'1',children:[{name:'孩子',id:'2'}],flagList:[],//存放被选中的children里的id}],//一级查询总数据};},mounted() {this.getFirstList();},methods: {//全选checkAllFun(){//全选操作前要清空原有已选列表，否则会出现重复数据，影响后边一级全选后联动全选按钮的判断this.firstList=[];this.secondList=[];//此时还未全选-点击之后进行全选操作if(this.radio.length===0){this.firstAllList.forEach(item=>{this.firstList.push(item.id);//此处用于记录当一级按钮被触发时，是新添加的还是取消的this.firstListCopY = JSON.parse(JSON.stringify(this.firstList));item.children.forEach(them=>{if(them){this.secondList.push(them.id);}  })})       }else{//此时已全选-点击之后进行取消全选操作this.firstList=[];this.secondList=[];this.firstListCopY=[];}},//第一层点击firstChack(falg,item){if(falg==='down'){//要展开啦//展开过程中查看是否已经存在，如果不存在，需要查询二级部门的接口if(item.children.length===0){this.getSecondList(item,item.id);}else{this.secondFlag = item.id;this.firstFlag = item.id;}}else{//要关闭啦this.secondFlag = '';this.firstFlag = ''} },//获取第一级数据getFirstList(){get(`url`).then(data=>{this.firstAllList = data;this.firstAllList.forEach(item=>{//存放二级数据item.children = [];//存放children里的被选id，//用于二级都被选中后联动一级被“选中”；反之，取消一级被选中item.flagList = [];}) })},//获取第二级数据getSecondList(item,id){get(`url/${id}`).then(data=>{item.children = data;if(data.length!==0){this.secondFlag = item.id;this.firstFlag = item.id;}//全选if(this.radio.length===1){//如果是全选情况下，展开二级部门，需要进行选中添加item.children.forEach(them=>{if(them){this.secondList.push(them.id);}  })}else{//非全选条件下//一级已经选择this.firstList.forEach(them=>{if(them===item.id){item.children.forEach(them=>{if(them){this.secondList.push(them.id);}  })}}) } })},//一级被点击firstClick(val){//添加全选/及反选操作if(this.firstList.length===this.firstAllList.length){this.radio = ['1'];}else{this.radio = [];}if(this.firstListCopY.length>this.firstList.length){//证明删除了一个一级的this.firstAllList.forEach(item=>{if(val===item.id){item.children.forEach(code=>{//找到对应一级val的所有二级进行删除this.secondList.splice(this.secondList.findIndex(item => item=== code.id), 1)})}})}else{//证明添加了一个一级的this.firstAllList.forEach(item=>{if(val===item.id){if(item.children){item.children.forEach(code=>{let b =  this.secondList.indexOf(code.id);//如果之前该一级部门下的二级没有存在已选列表中，就添加进去if(b==-1){this.secondList.push(code.id);}})}  }})}//同步更新，为下次一级被触发时判断使用this.firstListCopY = JSON.parse(JSON.stringify(this.firstList));},//二级被触发secondClick(){//每次需要先清空flagList，避免影响下边的逻辑判断this.firstAllList.forEach(item=>{item.flagList = [];})this.secondList.forEach(item=>{this.firstAllList.forEach((them)=>{  if(them.children){them.children.forEach(code=>{if(item===code.id){them.flagList.push(code.id);}//判断二级是否都被选中，如果全部选中，就将对应的一级添加进已选列表if(them.flagList.length==them.children.length){//没有在一级已选列表中找到该点击的二级对应的一级Id-添加进去let a =  this.firstList.indexOf(them.id);if(a==-1){this.firstList.push(them.id);}}else{//反之，如果二级没有被全选中，需要去掉对应一级的被选if(this.firstList.length===0){return false;}this.firstList.forEach((id,i)=>{if(id===them.id){this.firstList.splice(i,1);}  })} }) }})})//判断此时是否已经全部选中if(this.firstList.length===this.firstAllList.length){this.radio = ['1'];}else{this.radio = [];}}},};
</script>
<style lang="scss" scoped>
.checkAll /deep/ .van-checkbox,
.check_checkThem_first,
.check_checkThem_second{height: 54px; border-bottom: 1px solid #ebedf0;//联调完删除
}
.check_checkThem_second{width:88%;margin-left:12%;
}
.img{width:12px;height:12px;margin-right:2%;
}
</style>