要实现效果如下:
父组件代码(byfloor.vue):
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:{
},
}
.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;
}
子组件代码(checkbox1.vue)如下:
{{post1.floor}}
(共{{post1.room}}间,已选中{{checkAllGroup.length}}间)
全选
展开
收起
{{item}}
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;
}
},
},
}
.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;
}
其中那个点击选中颜色改变问题搞了我好几天,希望能帮到各位。