problem description: vue+element is used to make the select all buttons in groups do not affect each other
html section:
<el-form-item label=":">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
<div style="margin: 10px 0;"></div>
<div v-for="(city, group_index) in cities">
<span>{{city.label}}</span>
<el-checkbox style="margin-left:30px;" :indeterminate="isIndeterminate" v-model="checkPart" @change="checkPartChange(checkPart, group_index)"></el-checkbox>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="a in city.children" :label="a.value">{{a.label}}</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>vue.js section:
export default {
data(){
return{
checkAll: false,
checkPart:false,
checkedCities: [],
cities:[
{
value:"1",
label:"",
children:[
{value: "1", label: "1",},
{value: "2", label: "2",},
{value: "3", label: "3",},
]
},
{
value:"2",
label:"",
children:[
{value: "4", label: "4",},
{value: "5", label: "5",},
{value: "6", label: "6",},
]
},
{
value:"3",
label:"",
children:[
{value: "7", label: "7",},
{value: "8", label: "8",},
{value: "9", label: "9",},
]
},
],
isIndeterminate: true
}
},
methods:{
checkPartChange(val,group_index){
var group_val = []
var city = this.cities[group_index].children
if(val){
for(var i = 0; i<city.length; iPP){
group_val[i] = city[i]["value"]
}
}
this.checkedCities = group_val;
this.isIndeterminate = false;
},
}
}
:
