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个。
