chekbox 每项可多选，可限制个数

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 }] }
    ]
}

 取数据

 computed:{
        getState(){
          return this.$store.state.SeriesProductsAll;
        }
  },

   <el-tabs type="border-card"  v-if="id=='Cumulative_Monthly_jq'"  v-model="ActiveTabs">
          <el-tab-pane  v-for="(item,index) in getState" :key="index"  :name="item.name">
             <span slot="label" ><i class="el-icon-dessert" style="margin-right:5px"></i>{{item.name}} </span>
             <ul class="production_ul">
               <li v-for="(ite,i) in item.model" :key="i" >
                   <input type="checkbox" class="mgc mgc-success mgc-circle" :disabled="ite.disabled" @click="tabCheckboxFn($event,item,ite,i)">{{ite.name}}
               </li>
             </ul>
          </el-tab-pane>
        </el-tabs>

 

    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)
           }
            const activeArr=QueueFn(_this.ActiveArray);
            const datas=_this.$store.state.SeriesProductsAll;
                       datas.forEach((ite, index) => {
                               const active_id=activeArr.find((val) => val.id ==ite.id);
                                 if(ite.id==active_id.id){
                                       const objSize=_this.ToIsArrFn(activeArr,ite.id);
                                       const disable = objSize.ids.length >=4;
                                         ite.model.forEach((e,i)=>{
                                           e.checked= (objSize.ids.indexOf(e.id) > -1 ) ? true : false;
                                           e.disabled = e.checked  ? false : disable;
                                      });
                                 }
                  })
        },
        ToIsArrFn(datas,id){
             return datas.find((v) =>  v.id == id);
        }

 队列方法

export const QueueFn = function(objs) {
    let map = {},
        destArray = [];
    for (let = 0; v < objs.length; v++) {
        const id = objs[v][0];
        if (!map[id]) {
            destArray.push({
                id: id,
                ids: [objs[v][1]],
            });
            map[id] = [objs[v][1]];
        } else {
            for (let j = 0; j < destArray.length; j++) {
                const dj = destArray[j];
                if (dj.id == id) {
                    dj.ids.push(objs[v][1]);
                    break;
                }
            }
        }
    }

    return destArray;
}

输出结果：每项只能选择4个。