效果展示

取消子級勾選，父級的勾選效果

代碼合集

（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)}