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