uniapp全选功能制作-阿里云开发者社区

uniapp全选功能制作

2023-10-24 393

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： uniapp全选功能制作

可能会存在一些bug

以下是对每部分的一些解释

<template>部分：

通过<u-checkbox-group>标签来创建一个复选框组，该组中的所有复选框将共享一个数据模型。

v-model 指令用于绑定复选框组的值，即选中的复选框的名称。

placement 属性设置为 "column"，表示复选框列表将按列排列。

@change 事件监听器绑定到 checkboxChange 方法，当复选框状态发生变化时会触发这个方法。

在复选框组内部，使用 v-for 循环遍历 checkboxList1 数组中的每个对象，并创建相应的 <u-checkbox> 复选框。

<u-checkbox> 元素的属性设置了复选框的外观和标签，并将复选框的状态与数据模型中的选中状态关联。

<script>部分：

在 data 中定义了两个数据属性：checkboxValue1 和 checkboxList1。

checkboxValue1 用于存储选中的复选框的名称，初始为空数组。

checkboxList1 包含了一个对象数组，每个对象代表一个复选框选项，包括名称和是否禁用的信息。

在methods中定义了两个方法：

checkboxChange 方法用于处理复选框状态变化的事件。在这个示例中，它只是简单地打印出变化的信息。

selectAll 方法用于全选功能。根据当前选中的复选框数量和总复选框数量，它更新 checkboxValue1 数组以实现全选或取消全选的功能。同时，它也在控制台输出了选中状态的信息。

废话不多说直接上代码

<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"    
        >
            <u-checkbox
      shape="circle"
                size='60rpx'
                labelSize='50rpx'
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </u-checkbox>
        </u-checkbox-group>
        <!-- 添加全选按钮 -->
        <u-checkbox
    shape="circle"
            size='60rpx'
            labelSize='50rpx'
            :label="'全选'"
            @change="selectAll"
        >
        </u-checkbox>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }
    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        },
        selectAll() {
            // 点击全选按钮时，更新所有复选框的选中状态
            if (this.checkboxValue1.length === this.checkboxList1.length) {
                this.checkboxValue1 = [];
        console.log(this.checkboxValue1,1);
        console.log(this.checkboxList1,1);
            } else {
                this.checkboxValue1 = this.checkboxList1.map(item => item.name);
        console.log(this.checkboxValue1,1);
        console.log(this.checkboxList1,2);
            }
        }
    }
}
</script>