数据结构：
dateList: [
{
id: '1',
checkAll: false, // 全选 v-model
checkedCities: [], // 多选的值
isIndeterminate: false
},
{
id: '2',
checkAll: false,
checkedCities: [],
isIndeterminate: false
},
{
id: '3',
checkAll: false,
checkedCities: [],
isIndeterminate: false
},
]
// 多选框内容：
checkboxList：[
{ name: 'aaaa', code: '1'},
{ name: 'bbbb', code: '2'},
{ name: 'cccc', code: '3'},
]
HTML展示：
<div v-for="item in dateList">
<el-checkbox :indeterminate="item.isIndeterminate"
v-model="item.checkAll"
@change="checkAllchange">全选</el-checkbox>
<el-checkbox-group v-model="item.checkedCities" @change="checkChange">
<el-checkbox v-for="items in checkboxList" :label = "items.code" :key="items.code">
{{ items.name }}</el-checkbox>
</el-checkbox-group>
</div>
computed: {
checkboxListCode (){
return this.checkboxList.map(item => item.code)
}
}
methods:
checkAllchange（val）{
this.dateList.forEach((item,index) => {
if(item.checkAll){
this.index = index
return
}
this.dateList[this.index].checkedCities = val ? this.checkboxListCode : []
this.dateList[this.index].isIndeterminate= false
})
}
checkChange （value）{
this.dateList.forEach((item,index) => {
if(item.checkoutCities === value){
this.index = index
return
}
const checkboxCount = value.length
this.dateList[this.index].checkAll= checkboxCount === this.checkboxList.length
this.dateList[this.index].isIndeterminate = checkboxCount>0 && checkboxCount < this.checkboxList.length
})
}
网友评论