Element:Cheack多选勾选效果逻辑判断

效果展示

取消子级勾选，父级的勾选效果

代码合集

（1）组件代码  fromlist.cheackType  类型，permissio表示是权限. fromlist:[{id:1,children:[{...}]},...]传递的数据大致结构

<!-- 操作权限 --><template v-if="fromlist.cheackType == 'permission'"><div v-if="item.cheackall && item.title" class="CheackAllBox"><el-checkbox v-model="item.selected" :indeterminate="item.isIndeterminate" :label="item.title" @change="(value) => { handelCheackAll(value, key, item);} ">{{ item.name }}</el-checkbox></div><el-checkbox-group v-model="TableList[key]"><!-- 最父级 --><div v-for="(val, i) in item.children" class="tow_box"><el-checkbox :indeterminate="val.isIndeterminate" @change="(value) => { cheackChange(value, key, val, val.id, item);}" :label="val.id">{{ val.name }}</el-checkbox><div class="three_box_nochildren"><template v-for="(c_val, i) in val.children"><div v-if="!c_val.children"> <el-checkbox :label="c_val.id">{{ c_val.name}}</el-checkbox></div></template></div><!-- 子级 --><div class="three_box"><template v-for="(c_val, i) in val.children"><div v-if="c_val.children"><el-checkbox :label="c_val.id" :indeterminate="c_val.isIndeterminate" @change=" (value) => {cheackChange(value, key, c_val, c_val.id, val);}" >{{ c_val.name }}</el-checkbox><div class="four_box"><template v-for="(s_val, i) in c_val.children"><el-checkbox :indeterminate="s_val.isIndeterminate" @change=" (value) => { cheackChange( value,key, s_val,s_val.id, c_val ); }" :label="s_val.id">{{ s_val.name }}</el-checkbox><div :class=" s_val.children.length > 0 ? 'fir_box' : 'four_box'" v-if="s_val.children.length > 0 "><template v-for="(ss_val, i) in s_val.children"><el-checkbox :indeterminate="ss_val.isIndeterminate" @change=" (value) => { cheackChange( value, key, ss_val, ss_val.id, s_val);}" :label="ss_val.id"> {{ ss_val.name }} </el-checkbox><div :class="ss_val.children.length > 0? 'fir_box': 'four_box'" v-if="ss_val.children.length > 0"><template v-for="(sss_val, i) in ss_val.children"><el-checkbox :indeterminate="sss_val.isIndeterminate" @change=" (value) => { cheackChange(value, key,sss_val, sss_val.id,ss_val); }" :label="sss_val.id"> {{ sss_val.name }}</el-checkbox></template></div></template></div></template></div></div></template></div></div></el-checkbox-group></template>

(2) 处理方法

function cheackChange( value: any,key: string,item: any,id: any,p_item: any,isselect: boolean) {
//点击传递的数据console.log('value',value,'key',key,'item',item,'id',id,'p_item',p_item,'isselect',isselect);if (!props.fromlist.notrigger) {
//判断是否有子数据，则调到处理全选方法 针对点击的多选这个数据的子级，而不是最父级的子级if (item.children.length > 0) {handelCheackAll(value, key, item, id, "");}
//cheack点击传递过来的 数据 trus or falseif (value) {//处理勾选的方法getIdUpdataPrintSelectStatus(p_item,key,isselect,item.id,value,true,id);} else {//将点击的对象赋值为 false 就是取消勾选 item.isIndeterminate = false;//处理勾选的方法getIdUpdataPrintSelectStatus(p_item, key,isselect,item.id,value,false,id);}}}function getIdUpdataPrintSelectStatus(data: any,key: string,isselect: boolean,printid: number,value: boolean,is: boolean,id: number) {forFromlistGetIdUpdataStatus(props.fromlist.listData[key],data.id,key,is,id);
}function forFromlistGetIdUpdataStatus(data:any,printid:number,key:string,is:boolean,id:number){//传递过来的 多选存放的数组 data : 传递给组件渲染的数组  ,printid:多选勾选的元素的父级id  key：是当前分辨是哪个组件的key(如标签页点击切换不同模块下的多选，key就是tab的key值) is:勾选返回的 true(勾选中)/false(取消勾选)  id:当前勾选元素的id 在此方法中没用到//循环传递过来的数组data.children.map(item=>{//判断数组下是否能够匹配到 传递过来当前勾选数据的父id(判断父级勾选效果)if(item.id == printid){//找到勾选的父级//判断结构数组的子级的id是否存在 TableList[key]存放勾选数据中 并且 判断(你勾选的那个cheack)当前勾选的状态是trueif(item.children.every(c_item=> TableList[key].includes(c_item.id)) && is){//判断是否取消 cheack indeterminate属性，循环父级中是否所有的子级被勾选let isinfalse = item.children.every(c_item => {// 判断勾选数据中是否存在所有的子级数据。 并且子级为false if (TableList[key].includes(c_item.id) && !c_item.isIndeterminate ) {// 判断是否包含所有子级数据 这一层已经可以循环到勾选的那层级了return c_item.children.every(cc_item => TableList[key].includes(cc_item.id));}return false;});//判断是否存在勾选数据中，没有的话就添加进去TableList[key].includes(item.id)  ? '' : TableList[key].push(item.id)//是否父级层级下的子级全部勾选，将isIndeterminate设置为false ,设置为false 并且 父级下的子级数据全部都在TableList[key]中，父级勾选状态就会变成勾选。isinfalse  ? item.isIndeterminate = false : ''}else if(item.children.some(c_item=> TableList[key].includes(c_item.id))){// console.log('有子集并且还是勾选状态',item,'TableList[key]',TableList[key]);!TableList[key].includes(item.id)  ? TableList[key].push(item.id)   : ''//设置为减号item.isIndeterminate = true}else{//勾选的数组中如果不存在父级中的子级数据 就将父级取消所有状态 变成空的cheack框item.isIndeterminate = isTableList[key] = TableList[key].filter(num => num != item.id);}//如果此层级找不到就一层一层向上找 直到能匹配上传递过来的勾选父级id:printidforFromlistGetIdUpdataStatus(props.fromlist.listData[key],item.parent_id,key,is,id)}else {//如果此层级找不到就一层一层向下找 直到能匹配上传递过来的勾选父级id:printidforFromlistGetIdUpdataStatus(item,printid,key,is,id)}