个人做网站郊游的英,网站的推广方式包括,公众号模板网站,西安建站模板厂家首先实现递归checkbox的组件假定#xff0c;我们要实现的权限组件效果是这样的#xff1a;要实现点击系统#xff0c;下面的都全选#xff0c;点击基础功能#xff0c;用户管理半选#xff0c;系统半选。点击新增组织#xff0c;如果基础功能没有选中#xff0c;则基础…首先实现递归checkbox的组件假定我们要实现的权限组件效果是这样的要实现点击系统下面的都全选点击基础功能用户管理半选系统半选。点击新增组织如果基础功能没有选中则基础功能改为选中。0 :class{top_check:datas.parentId0}{{datas.title}}{{datas.title}}0基础功能0 pchangepermitCheck :keyd.id{{d.title}}export default{name:permitnode,props:{datas:{type:Object,default:{}}},data(){return {isIndeterminate:false,childClick:true,based:true};},mounted(){this.basedthis.datas.checkState;let count0;//初始化时判断自身时全选还是半选this.datas.childResoList.forEach(it{if(it.checkState){count;}});if(count0countthis.isIndeterminatetrue;this.datas.indetertrue;}if(count0){this.isIndeterminatefalse;this.datas.indeterfalse;}if(countthis.datas.childResoList.length){this.isIndeterminatefalse;this.datas.indeterfalse;}},//watch是监听数据的变化所以change引起树的下级变化//下级变化调用leafcheck方法改变上层数据时上层数据的值没有变所以不会死循环watch:{datas.checkState:function(val){//如果是半选状态则表明是由子组件引起的变化不进行全选操作if(this.datas.indetertrue){return ;}//递归watch过来时取消本身的半选状态。this.isIndeterminatefalse;this.basedval;//遍历全选子组件数据子组件watch到变化全选算子组件for(let i0;ilet tmpthis.datas.childResoList[i];tmp.checkStatethis.datas.checkState?true:false;if(tmp.childResoListtmp.childResoList.length0){tmp.indeterfalse;//全选时改变半选状态}this.datas.childResoList.splice(i,1,tmp);}}},methods:{handleCheckAllChange(val){//点击上面的全选按钮时改变全选状态出发watch变化this.isIndeterminatefalse;//取消自身的半选状态this.datas.indeterfalse;//向上触发事件改变上层checkbox的变化this.$emit(pchange);},//子组件变化时触发的pchange事件permitCheck(){this.leafcheck();},//基础权限选中则父权限选中基础权限取消则全部取消选中。basecheck(){if(this.basedfalse){this.datas.checkStatefalse;this.isIndeterminatefalse;this.datas.indeterfalse;}else{this.datas.checkStatetrue;this.isIndeterminatetrue;this.datas.indetertrue;}this.$emit(pchange);},//叶子checkebox变化时包括子组件变化leafcheck(val){let count0;let hasIndeterfalse;//计算选中的数值是不是达成了全选的状态this.datas.childResoList.forEach(it{if(it.checkState){//判断其中是否有半选的if(it.indeter!undefined){if(it.indetertrue){hasIndetertrue;}}count;}});//parentId!0不是第一级权限if(this.datas.parentId!0){if(valthis.basedfalse){this.basedtrue;this.datas.checkStatetrue;}//当checkbox选中时这时候based必为trueif(count//this.datas.checkStatetrue;//indeter用来表示数据是否是显示为半选状态this.datas.indetertrue;this.isIndeterminatetrue;}else{if(hasIndeter){this.datas.indetertrue;this.isIndeterminatetrue;}else{this.datas.indeterfalse;this.isIndeterminatefalse;}}}else{console.log(count:count);if(count0countthis.datas.indetertrue;this.isIndeterminatetrue;this.datas.checkStatetrue;//indeter用来表示数据是否是显示为半选状态}//基础权限也没选中时if(count0){this.datas.indeterfalse;this.isIndeterminatefalse;this.datas.checkStatefalse;}//因为选中和半选都是选中状态所以要做一下半选显示状态的区分//全部选中且没有半选显示状态的。if(countthis.datas.childResoList.lengthhasIndeterfalse){this.datas.indeterfalse;this.isIndeterminatefalse;this.datas.checkStatetrue;}//全部选中但是有是半选显示状态的if(countthis.datas.childResoList.lengthhasIndetertrue){this.datas.indetertrue;this.isIndeterminatetrue;this.datas.checkStatetrue;}}//向上层反馈变化this.$emit(pchange);}}}.permit_cont{color:#fff;font-size:12px;line-height: 2;}.permit_hr{border-bottom: 1px solid #2F3B52;margin:10px 0;}.top_check{margin-bottom:20px;}之后需要在这个组件外面套一层组件提供一个方法来获取选中的checkboximport permitNode from /components/public/permit_nodeexport default{props:{chess:{type:Array,default:[]},rootId:{type:Number,defualt:0}},components:{permitNode},data(){return {};},methods:{//遍历获取树型数据中选中的checkbox的idgetCheckedKey(){let arr[];let keyarrthis.getCheckedByCircle(this.chess,arr);return keyarr;},getCheckedByCircle(keys,arr){for(let i0;ilet tmpkeys[i];if(tmp.checkState){arr.push(tmp.id);}if(tmp.childResoList.length0){this.getCheckedByCircle(tmp.childResoList,arr);}}return arr;}}}第二个组件上面的v-for是因为权限要像tab页签一样分多个模块根据模块的选中状态展现不同的权限选项。
