首页 IT程序员内容详情

uni-app中checkbox-group实现全选功能

2021-08-26 40899 编程艺术家

uni-app中checkbox-group实现全选功能

功能描述:

点击全选框,选项全被选中,再次点击,选项全不被选中



全选框选中状态下,取消任一选项,全选框不被选中,并且在全选框不被选中的状态下,如果选项全都被选择,全选框会变为选中状态




代码块:

<template>

<view class="container">

<text>请选择你喜欢的漫画</text>

<!-- 全选 -->

<checkbox-group name="allCheck" @change="changeAll">

<label>

<checkbox :value="allCheck.value" :checked="allCheck.checked"/><text>{{allCheck.name}}</text>

</label>

</checkbox-group>

<!-- 每项选择 -->

<checkbox-group name="check" @change="changeCheck" class="check">

<!-- 注意v-for不要设在checkbox-group上 -->

<label v-for="(item, index) in content" :key="item.id">

<checkbox :value="item.value" :checked="item.checked"/><text>{{item.name}}</text>

</label>

</checkbox-group>

</view>

</template>


<script>

export default {

data () {

return{

allCheck : {

name : '全选',

value : 'all',

checked : false

},

content : [

{

name : '《某天成为公主》',

value : '《某天成为公主》',

id : 1,

whether : true

},

{

name : '《当神不让》',

value : '《当神不让》',

id : 2,

whether : true

},

{

name : '《海贼王》',

value : '《海贼王》',

id : 3,

whether : true

}

]

}

},

methods:{

    // 全选

changeAll : function(e) {

if(e.detail.value.length == 0) {

this.content.map(item => this.$set(item, 'checked', false));

this.$set(this.allCheck, 'checked', false);

}else{

this.content.map(item => this.$set(item, 'checked', true));

this.$set(this.allCheck, 'checked', true);

}

},

// 多选

changeCheck : function(e) {

var items = this.content;

var len = this.content.length;

var values = e.detail.value;

// console.log(values)

for(var i = 0; i < len; i++) {

var item = items[i];

if(values.includes(item.value)){

this.$set(item, 'checked', true);

}else{

this.$set(item, 'checked', false);

}

}

// 判断选中状态

var arr = [];

this.content.forEach(item => item.whether == true ? arr.push(item) : '');

var isAll = arr.every(item => item.checked == true);

isAll ? this.$set(this.allCheck, 'checked', true) : this.$set(this.allCheck, 'checked', false)

}

}

}

</script>


<style>

.container {

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

.check {

display: flex;

flex-direction: column;

}

page {

background-color: #f1e4ff;

}

</style>


细节注意:

1.v-for不要写到checkbox-group标签上,而应该写到它的子级label上,不然取到的e.detail.value只是一个单选的值,而不是多选的值

2.this.$set的使用

3.数组的map、every、some等方法

4.举一反三,可以根据自己的需求去判断逻辑然后改写这个代码,都是通用的

————————————————

版权声明:本文为CSDN博主「milkgan」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/milkgan/article/details/108264602


相关标签: # vue

文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
 暂无评论,快来抢沙发吧~

发布评论