文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp多选框全选功能的实现思路与方法实例

2024-04-02 19:55

关注

前言

uniapp内置的checkbox其实以及checkbox-group本来挺好的,但是有两个问题:

他们无法实现全选的原因是:

我动态修改checkboxchecked字段时,界面上的状态能够实时变化,但是无法触发checkbox-groupchange事件。意味着无法依赖checkbox-group管理好已选项。

就是说:我点了全选,界面上看着是全选了。然后此时我取消了其中一个选项,此时触发change事件,但是它反馈给我的已选列表是错的。这是不行的。

所以我自己想了个实现全选多选框的方案。

实现思路

鉴于上面的问题,于是就可以放弃checkbox-group了,那么,我顺便就放弃了checkbox,因为我更喜欢radio的圆圈样式。

首先先模拟生成一些数据,方便展示,数据的要点是要有一个字段selected,其余随心所欲:

<script setup lang="ts">
    import { reactive } from "vue";
    // 模拟的数据对象,要是响应式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成数据
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "标题" + i,
            selected: false,
        });
    }
</script>

然后我们需要有一个存储已选择数据信息的对象,采用map:

    // 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定
    let selected = reactive(new Map<number, number>());

在然后我们得有一个选项框点击事件,用于选择数据或者取消选择:

    // 选项框点击事件,参数是数据的下标
    function checkbox(index: number) {
        // 选中的状态下再次点击,即为取消选中
        if (data[index].selected) {
            data[index].selected = false;
            selected.delete(index); // 然后删除对应key即可
        }
        // 未选中状态下点击
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }

再再然后,我们还得有一个全选的点击事件:

    // 全选与反选事件
    function allSelect() {
        // 已经全选情况下,就是反选,全选就说明长度一样
        if (selected.size === data.length) {
            selected.clear(); // 全部清除
            data.forEach((element) => {
                element.selected = false; // 全部不选,就行了
            });
        }
        // 还未全选的状态下
        else {
            data.forEach((element, index) => {
                // 因为可能存在部分已经选择了,所以得先判断是否已存在,不存在才需要添加
                if (!selected.has(index)) {
                    selected.set(index, element.id); // key是对应的下标index,而value是可以自定义的
                    element.selected = true; // 设为选中
                }
            });
        }
    }

其实上面两个点击事件都是很基本的判断和增删数据。至此功能已经全部都有了,下面看看页面怎么写:

<template>
    <!-- 是个多选列表 -->
    <view v-for="(item, index) in data">
        <label style="margin-left: 50px">
            <radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }}
        </label>
    </view>
    <!-- 全选按钮 -->
    <label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label>
</template>

其实就两组radio,一个是循环展示数据,一个是全选按钮。

连起来的完整代码:

<template>
    <!-- 是个多选列表 -->
    <view v-for="(item, index) in data">
        <label style="margin-left: 50px">
            <radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }}
        </label>
    </view>
    <!-- 全选按钮 -->
    <label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label>
</template>
<script setup lang="ts">
    import { reactive } from "vue";

    // 模拟的数据对象,要是响应式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成数据
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "标题" + i,
            selected: false,
        });
    }

    // 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定
    let selected = reactive(new Map<number, number>());

    // 全选与反选事件
    function allSelect() {
        // 已经全选情况下,就是反选,全选就说明长度一样
        if (selected.size === data.length) {
            selected.clear(); // 全部清除
            data.forEach((element) => {
                element.selected = false; // 全部不选,就行了
            });
        }
        // 还未全选的状态下
        else {
            data.forEach((element, index) => {
                // 因为可能存在部分已经选择了,所以得先判断是否已存在,不存在才需要添加
                if (!selected.has(index)) {
                    selected.set(index, element.id); // key是对应的下标index,而value是可以自定义的
                    element.selected = true; // 设为选中
                }
            });
        }
    }

    // 选项框点击事件,参数是数据的下标
    function checkbox(index: number) {
        // 选中的状态下再次点击,即为取消选中
        if (data[index].selected) {
            data[index].selected = false;
            selected.delete(index); // 然后删除对应key即可
        }
        // 未选中状态下点击
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }
</script>
<style></style>

看起来代码不少,其实都是很基础的逻辑判断。

最后效果是这样的:

全选:

多选:

反选全部:

总结 

到此这篇关于uniapp多选框全选功能实现的文章就介绍到这了,更多相关uniapp多选框全选功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯