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>