<!-- 说明 -->
<!-- @author ex-jinming002-->
<script>
export default {
name: 'Overall',
data() {
return {
// 顶部全选所有状态
checkAll: false,
isIndeterminate: false,
checkBoxData: [],
testData: [
{
title: '基本信息：',
options: [{ label: '存在问题', value: 'laborum officia' }],
},
{
title: '预计进展详情：',
options: [
{
label: '预计土地盘整年份',
value: 'nostrud fugiat',
},
{ label: '是否计划本年度开工', value: 'aliqua' },
{ label: 'in deserunt', value: 'mollit sed' },
],
},
{
title: '实际进展详情：',
options: [
{ label: '签约时间', value: 'consectetur proident' },
{ label: '用地面积(公顷)', value: 'dolor et qui cupidatat' },
{ label: '开工时间', value: 'dolore ut occaecat non cillum' },
],
},
{
title: '中止项目：',
options: [
{ label: '中止原因', value: 'exercitation ut' },
{ label: '土地实际盘整面积', value: 'amet' },
{ label: '是否计划盘整', value: 'Excepteur esse in' },
],
},
],
}
},
mounted() {
const tempArr = []
this.testData.forEach(item => {
tempArr.push({
// 子项的全选状态
checkAll: false,
// 子项的默认选中的checkbox
checkedCities: [],
isIndeterminate: false,
options: item.options,
title: item.title,
})
})
console.log(this.checkBoxData, '遍历之前的')
this.checkBoxData = tempArr
console.log(this.checkBoxData, '遍历之hou的')
},
methods: {
// 全选所有子项
handleCheckAll(val) {
this.checkBoxData.forEach((item, index) => {
this.handleCheckAllChange(val, index)
this.checkBoxData[index].checkAll = val
})
},
// 子项的全选change事件
handleCheckAllChange(val, index) {
console.log(val)
this.checkBoxData[index].checkedCities = (val
? this.checkBoxData[index].options
: []
).map(item => item.value)
this.checkBoxData[index].isIndeterminate = false
this.TopCheckBoxCheck()
},
// 子项change事件
handleCheckedCitiesChange(value, index) {
console.log(this.checkBoxData[index].checkedCities)
const checkedCount = value.length
this.checkBoxData[index].checkAll =
checkedCount === this.checkBoxData[index].options.length
this.checkBoxData[index].isIndeterminate =
checkedCount > 0 &&
checkedCount < this.checkBoxData[index].options.length
this.TopCheckBoxCheck()
},
TopCheckBoxCheck() {
const allSelectLen = this.checkBoxData.filter(item => item.checkAll)
.length
if (allSelectLen === this.checkBoxData.length) {
this.checkAll = true
this.isIndeterminate = false
} else {
this.checkAll = false
this.isIndeterminate =
this.checkBoxData.findIndex(item => item.isIndeterminate) >= 0 ||
this.checkBoxData.findIndex(item => item.checkAll) >= 0
}
},
handleCheck() {
const res = this.checkBoxData.map(item => {
if (item.checkedCities && item.checkedCities.length > 0) {
return item.checkedCities
}
})
console.log(res.flat())
const result = res
.flat()
.filter(item => {
if (item) {
return item
}
})
.join()
console.log(result)
},
},
}
</script>
<template>
<section class="Overall" v-if="checkBoxData && checkBoxData.length > 0">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAll"
>全选</el-checkbox
>
<br /><br /><br />
<div v-for="(item, index) in checkBoxData" :key="index">
<el-checkbox
:indeterminate="item.isIndeterminate"
v-model="item.checkAll"
@change="
val => {
handleCheckAllChange(val, index)
}
"
>{{ item.title }}</el-checkbox
>
<div style="margin: 15px 0;"></div>
<el-checkbox-group
v-model="item.checkedCities"
@change="
val => {
handleCheckedCitiesChange(val, index)
}
"
>
<el-checkbox
v-for="option in item.options"
:label="option.value"
:key="option.value"
>{{ option.label }}</el-checkbox
>
</el-checkbox-group>
<br />
<br />
<br />
</div>
<br /><br /><br />
<el-button :style="{ 'margin-left': '100px' }" @click="handleCheck"
>提交</el-button
>
</section>
</template>
<style lang="less">
.Overall {
}
</style>
