vantui复选框checkbox加折叠⾯板collapse组合使⽤代码量不多 ⾃⼰看下吧 希望对你有帮助
<template>
<div id='mzjfmain'>
<van-checkbox-group v-model="result">
<div class="mzjf_box"
v-for="i in list"
:key="i">
<div ></div>
<van-collapse v-model="
activeNames">
<van-collapse-item :name="i">
<template #title>
<div class="collapse_title">
<div class="mzjf_checkbox"
@click.stop>
<van-checkbox :name="i"
label-disabled
@click.stop="Onclick_mzjf()"></van-checkbox>
</div>
<div class="mzjf_text">
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
</div>
</div>
</template>
<p>展开内容1</p>
<p>展开内容2</p>
<p>展开内容3</p>
</van-collapse-item>
</van-collapse>
</div>
</van-checkbox-group>
<van-submit-bar :price="3050"
button-text="提交订单"
@submit="onSubmit">
<van-checkbox v-model="checked"
@click="Allchecked()">全选</van-checkbox>
</van-submit-bar>
</div>
</template>
<script>
export default{
name:'mzjfmain',
data(){
return{
activeNames:[],
borderboxresult:[],
checked:true,
list:[1,2,3,4,5]
}
},
mounted(){
this.alterBqSx();
},
methods:{
alterBqSx(){
var texts = ElementsByClassName("mzjf_text");
var rightIcons = ElementsByClassName("van-icon-arrow") for(let i =0; i < texts.length; i++){
var textHeight = texts[i].offsetHeight;
checkboxs[i].style.marginTop = textHeight /2-10+"px";
rightIcons[i].style.marginTop = textHeight /2-12+"px";
}
},
Onclick_mzjf(index, item){
sult.length <this.list.length){
this.checked =false
}else{
this.checked =true
}
console.sult.sort())
},
Allchecked(){
if(this.checked){
for(let i =0; i <this.list.length; i++){
}
}
console.log(this.checked)
},
onSubmit(){
},
},
}
</script>
<style lang="scss"scoped>
#mzjfmain{
width: 100%;
height: 100%;
background-color: #f7f7f7;
/deep/ .van-cell{
// box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
.collapse_title{
width: 100%;
height: 100%;
.mzjf_checkbox{
float: left;
width: 6%;
// background-color: violet;
}
.mzjf_text{
float: right;
width: 92%;
height: 100%;
margin-left: 2%;
// background-color: yellowgreen;
}
}
}
截图}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。