uni-app中全选多选单选
image.png
<!--<template>
<view>
<uni-nav-bar left-icon="back" title="合并账号"></uni-nav-bar>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>-->
<template>
<view>
<view>
<uni-nav-bar left-icon="back" title="合并账号"></uni-nav-bar>
<!-- 单个复选框 -->
<!--<checkbox-group class="block" @change="checkboxChange">
<view class="cu-form-group">
<view class="title">复选选操作(checkbox)</view>
<checkbox :class="isChecked?'checked':''" :checked="isChecked?true:false" value="1"></checkbox>
</view>
</checkbox-group>-->
<!-- 多个复选框，带全选 -->
<view class="tl-section">
<checkbox-group class="block" @change="changeCheckbox">
<view v-for="item in checkboxData" :key="item.value" class="tl-row">
<view>
<image :src="defaultImg" class="tl-img-100"></image>
</view>
<view class="tl-center">
<view>张三三</view>
<view>187****1998 <text class="tl-font-green">商家</text></view>
</view>
<view>
<checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" :class="{'checked':checkedArr.includes(String(item.value))}"></check                    </view>
</view>
</checkbox-group>
</view>
<view>
<checkbox-group @change="allChoose">
<label>
全选 <checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox>
</label>
</checkbox-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isChecked:false,flutter uniapp 哪个好
defaultImg: 'wkfiles.weikepingtai/wks/20201112/images/20201112042458217.jpg',
checkboxData:[
{'value':0,'label':'选项⼀'},
{'value':1,'label':'选项⼆'},
{'value':2,'label':'选项三'},
{'value':3,'label':'选项四'},
{'value':4,'label':'选项五'},
{'value':5,'label':'选项六'},
{'value':6,'label':'选项七'},
{'value':7,'label':'选项⼋'},
{'value':8,'label':'选项九'},
{'value':9,'label':'选项⼗'}
],
checkedArr:[], //复选框选中的值
allChecked:false //是否全选
}
},
methods: {
/
/ 单个复选框事件
checkboxChange(e) {
let values = e.detail.value;
if(values[0]==1){
this.isChecked=true;
}else{
this.isChecked=false;
}
},
// 多选复选框改变事件
changeCheckbox(e){
this.checkedArr = e.detail.value;
// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){

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