chekbox【2】 父级多选（选择父，子不能选择），字节多选（选择子，父不能选择），可限制个数

Vuex

  state：{
     "SeriesProductsAll": [ //系列-成品
        { name: "ping", id: 1, disabled: false, checked: false, model: [{ name: "HW1623", id: "1_1", disabled: false, checked: false }, { name: "HW1633", id: "1_2", disabled: false, checked: false }, { name: "HW1643", id: "1_3", disabled: false, checked: false }, { name: "HW1653", id: "1_4", disabled: false, checked: false }, { name: "HW1663", id: "1_5", disabled: false, checked: false }, { name: "HW1673", id: "1_6", disabled: false, checked: false }] },
        { name: "Hawaii", id: 2, disabled: false, checked: false, model: [{ name: "HW2623", id: "2_1", disabled: false, checked: false }, { name: "HW16133", id: "2_2", disabled: false, checked: false }, { name: "HW1443", id: "2_3", disabled: false, checked: false }, { name: "HW1453", id: "2_4", disabled: false, checked: false }] },
        { name: "Mondo", id: 3, disabled: false, checked: false, model: [{ name: "HW2633", id: "3_1", disabled: false, checked: false }, { name: "HW1643", id: "3_2", disabled: false, checked: false }, { name: "HW1653", id: "3_3", disabled: false, checked: false }, { name: "HW1663", id: "3_4", disabled: false, checked: false }] }
    ]
}

 

<template>
<div>
       <el-tabs type="border-card"  v-if="id=='Wip_Monthly_jq'"  v-model="ActiveTabs"  @tab-click="tabPaneFn($event)">
          <el-tab-pane  v-for="(item,index) in getState" :key="index"  :name="item.name">
             <span slot="label" > 
                <input type="checkbox" title="h_t" class="mgc mgc-info h_t" :disabled="item.disabled" @click="BabTitleCheckBoxFn($event,item,index)"/>{{item.name}}
                 </span>
             <ul class="production_ul">
               <li v-for="(ite,i) in item.model" :key="i" >
                   <input type="checkbox" class="mgc mgc-info c_t" title="c_t" :disabled="ite.disabled" @click="tabCheckboxFn($event,item,ite,i)">{{ite.name}}
               </li>
             </ul>
          </el-tab-pane>
        </el-tabs>
</div>
</template>

<script>
export default {
    name:"jqonechecboxtwochecbox",
    data(){
        return{
              ActiveTabs:"3B3F",
              ActiveArray:[],
              ActiveArrayparent:[]
        }
    },
    methods:{
        tabPaneFn(ev){
            let _this=this;
        },
          BabTitleCheckBoxFn(ev, item, index) {
              let _this = this;
              const state = ev.srcElement.checked;
              const datas = _this.$store.state.floorStayAll;
              if (state) {
                _this.ActiveArrayparent.push(item.id);
              } else {
                  _this.ActiveArrayparent.splice(_this.ActiveArrayparent.findIndex((items) => items === item.id),1);
              }
              datas.forEach((data, index) => {
                const disable = _this.ActiveArrayparent.length >= 4;
                datas[index].disabled = _this.ActiveArrayparent.indexOf(data.id) > -1 ? false : disable;
                      data.model.forEach((ite, index) => {
                          ite.disabled = _this.ActiveArrayparent.length > 0 ? true : false;
                  });
              });
            },
        tabCheckboxFn(ev,item,ite,ins){
          let _this=this;
           const state=ev.srcElement.checked;
           if(state){
                _this.ActiveArray.push([item.id,ite.id]);
           }else{
               _this.ActiveArray.splice(_this.ActiveArray.findIndex(items =>  items[1] === ite.id), 1)
           }
           let activeArr=[];
           _this.ActiveArray.forEach((r,i)=>{
                 activeArr.push(r[1]);
           })
            const datas=_this.$store.state.floorStayAll;
                       datas.forEach((ite, index) => {
                                       ite.disabled=activeArr.length>0 ? true:false;
                                       ite.model.forEach((e,i)=>{
                                              const disable = activeArr.length >=4;
                                                  e.checked= (activeArr.indexOf(e.id) > -1 ) ? true : false;
                                                  e.disabled = e.checked  ? false : disable;
                                      });
                  })
        },
    },
  
      computed:{
        getState(){
          return this.$store.state.floorStayAll;
        }
  },
}
</script>