要實現效果如下：
父組件代碼(byfloor.vue)：
<template>
<!--按樓層-->
<Row style="background:#eee;">
<Col span="11" class="cardLeft">
<Card class="cardo">
<RadioGroup v-model="animal" style="margin-bottom:1rem;">
<Radio label="0">全部</Radio>
<Radio label="1">1棟</Radio>
<Radio label="2">2棟</Radio>
<Radio label="3">3棟</Radio>
</RadioGroup>
<p style="margin-bottom:20px;">
<Select v-model="orientations1" style="width:100px">
<Option v-for="item in orientations" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="daylighting1" style="width:100px">
<Option v-for="item in daylighting" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="sight1" style="width:100px">
<Option v-for="item in sight" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</p>
<div class="cardBody" v-for="(floor0,index) in list" :key="index">
<checkbox1 v-bind:post1='floor0'></checkbox1>
</div>
</Card>
</Col>
</Row>
</template>
<script>
import checkbox1 from './checkbox1/checkbox1'
export default {
data(){
return{
animal:'1',
orientations1:'',
daylighting1:'',
sight1:'',
sight:[],
daylighting:[],
orientations:[],
list:[{"floor":"一樓","room":'5',"isClick":false,"bs":'1',"menu":[]},{"floor":"二樓","room":'7',"isClick":false,"bs":'2',"menu":[]}],
}
},
mounted:function(){
},
components:{
checkbox1,
},
beforeDestroy(){
},
methods:{
},
}
</script>
<style lang="scss" scoped="scoped">
.ivu-checkbox+span{
background-color:#DDDEE1;
color:#495060;
}
.ivu-checkbox-checked+span{
background-color:#4178E8;
color:#FFFFFF;
}
/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.cardLeft{
width:100%;
min-height:9.15rem;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.colorTitle{
color:#4178E8;
height:2.9rem;
padding-left:1.4925%;
padding-top:1rem;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cardBody{
min-height:2rem;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom:20px;
}
.span1{
color:#E60012;
margin-left:20px;
margin-right:20px;
}
.gang{
display:inline-block;
width:0.1rem;
height:0.7rem;
line-height:0.7rem;
background-color:#4178E8;
}
.cardo{
min-height:7.5rem;
}
</style>
子組件代碼(checkbox1.vue)如下：
<template>
<div>
<p class='title4'>
<span style="margin-left:20px;">{{post1.floor}}</span>
<span style="margin-right:20px;">(共{{post1.room}}間，已選中{{checkAllGroup.length}}間)</span>
<Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll($event,post1.bs)" v-if="post1.isClick">
全選
</Checkbox>
<span class="span2" v-if="!post1.isClick" @click="ck(post1,post1.bs)">展開
<Icon type="ios-arrow-down"></Icon>
</span>
<span class="span2" v-if="post1.isClick" @click="ck(post1,post1.bs)">收起
<Icon type="ios-arrow-up"></Icon>
</span>
</p>
<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange" v-if="post1.isClick" >
<Checkbox :label="item" class="checkbox" v-for="item in post1.menu" :key="item">
<span :class="checkAllGroup.indexOf(item)=='-1'?checkboxspanfalse:checkboxspan" @click="clickLc(post1.bs,item)">{{item}}</span>
</Checkbox>
</CheckboxGroup>
</div>
</template>
<script>
export default {
props: {
'post1': {
type: Object,
require: true
}
},
data() {
return {
indeterminate: false,
checkAll: false,
checkAllGroup: [],
checkboxspanfalse: 'checkboxspanfalse',
checkboxspan: 'checkboxspan',
data1: [101, 102, 103, 105, 106],
data2: [101, 102, 103, 105, 106, 107, 108],
room: [],
num: null,
}
},
watch: {
post1: {
handler(newValue, oldValue) {
console.log(newValue);
},
deep: true
}
},
methods: {
ck(post1, bs) {
console.log(bs);
if (bs == '1') {//第幾樓
post1.menu = this.data1;
this.room = this.data1;
}
if (bs == '2') {
post1.menu = this.data2;
this.room = this.data2;
}
if (!post1.isClick) {
this.$set(post1, 'isClick', true);
} else {
this.$set(post1, 'isClick', false);
}
},
clickLc(index, item) {
console.log(index);
console.log(item);
this.num = index;
},
handleCheckAll($event, bs) {
console.log("$event:" + $event);
console.log("$event.target.checked:" + $event.target.checked);
console.log(bs);
console.log(this.room);
bs == '1' ? this.room = this.data1 : this.room = this.data2;
if (this.indeterminate) {
this.checkAll = false;
} else {
this.checkAll = !this.checkAll;
}
this.indeterminate = false;
if (this.checkAll) {
this.checkAllGroup = this.room;
} else {
this.checkAllGroup = [];
}
},
checkAllGroupChange(data) {
console.log(data);
this.num == '1' ? this.room = this.data1 : this.room = this.data2;
console.log(this.room);
if (data.length === this.room.length) {
this.indeterminate = false;
this.checkAll = true;
} else if (data.length > 0) {
this.indeterminate = true;
this.checkAll = false;
} else {
this.indeterminate = false;
this.checkAll = false;
}
},
},
}
</script>
<style lang="scss" scoped="scoped">
.title4 {
position: relative;
font-size: 12px;
background-color: #E9EAEC;
height: 2.1rem;
line-height: 2.1rem;
.btn1 {
width: 104px;
height: 32px;
}
}
.span2 {
position: absolute;
right: 20px;
}
.checkbox {
position: relative;
width: 80px;
height: 40px;
margin-right: 10px;
margin-top: 10px;
}
.checkboxspanfalse {
color: #495060;
text-align: center;
border-radius: 2px;
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 40px;
line-height: 40px;
background-color: #DDDEE1;
display: inline-block;
z-index: 1;
}
.checkboxspan {
color: white;
text-align: center;
border-radius: 2px;
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 40px;
line-height: 40px;
background-color: #4178E8;
display: inline-block;
z-index: 1;
}
</style>
其中那個點擊選中顏色改變問題搞了我好幾天，希望能幫到各位。