Exemples pour expliquer comment uniapp implémente la fonction de sélection totale des boîtes à sélection multiple

Cet article vous apporte des connaissances pertinentes sur uniapp, qui organise principalement les problèmes liés à la mise en œuvre de la fonction tout sélectionner de la boîte à sélection multiple. La raison pour laquelle la fonction tout sélectionner ne peut pas être implémentée est que lorsque le champ est coché. la case à cocher est modifiée dynamiquement, l'interface Le statut peut changer en temps réel, mais l'événement de changement de checkbox-group ne peut pas être déclenché. Jetons-y un coup d'œil, j'espère que cela sera utile à tout le monde.

Recommandé : "tutoriel uniapp"

Les checkbox et checkbox-group intégrés d'uniapp sont en fait assez bons, mais il y a deux problèmes : checkbox其实以及checkbox-group本来挺好的，但是有两个问题：

1. 无法依赖其事件实现全选
2. 样式固定，难以修改

他们无法实现全选的原因是：
我动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件。意味着无法依赖checkbox-group管理好已选项。

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

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

实现思路

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

首先先模拟生成一些数据，方便展示，数据的要点是要有一个字段selected

1. Ne peut pas compter sur ses événements pour réaliser toutes les sélections
2. Le style est fixe et difficile à modifier

La raison pour laquelle ils ne peuvent pas réaliser toutes les sélections est :

Je modifie dynamiquement En cochant le champ <code>checked de la case à cocher, l'état sur l'interface peut changer en temps réel, mais l'événement change de checkbox-group ne peut pas être déclenché. Cela signifie que checkbox-group ne peut pas être utilisé pour gérer les options sélectionnées.

C'est-à-dire : j'ai cliqué sur Sélectionner tout, et il semblait que Tout était sélectionné sur l'interface. Ensuite, j'ai annulé l'une des options et l'événement de changement a été déclenché, mais la liste sélectionnée qu'elle m'a renvoyée était fausse. Cela ne fonctionnera pas.

J'ai donc trouvé une solution pour implémenter la boîte de sélection multiple Sélectionner tout.

Idées d'implémentation

Au vu des problèmes ci-dessus, je peux abandonner checkbox-group Ensuite, j'ai abandonné checkbox en passant, parce que je préfère le style cercle de la radio.

Tout d'abord, simulez et générez des données pour un affichage facile. Le point clé des données est d'avoir un champ sélectionné, et le reste peut être fait comme vous le souhaitez :

<script>
    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>

Ensuite, nous avons besoin d'un objet pour stocker les informations de données sélectionnées, en utilisant map :

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

Ensuite, nous devons avoir un événement de clic de boîte d'option pour sélectionner ou désélectionner des données :

    // 选项框点击事件，参数是数据的下标
    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);
        }
    }

Et puis, nous devons avoir un événement de clic pour toutes les sélections :

    // 全选与反选事件
    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; // 设为选中
                }
            });
        }
    }

En fait, les deux événements de clic ci-dessus sont tous des jugements très basiques et des ajouts et suppressions de données. Maintenant toutes les fonctions sont disponibles, voyons comment c'est écrit sur la page :

<template>
    <!-- 是个多选列表 -->
    <view>
        <label>
            <radio></radio>{{ item.text }}        </label>
    </view>
    <!-- 全选按钮 -->
    <label> <radio></radio>全选</label></template>

En fait, il existe deux ensembles de radios, l'un sert à afficher les données en boucle et l'autre est un bouton de sélection de tout.

Le code complet connecté ensemble :

<template>
    <!-- 是个多选列表 -->
    <view>
        <label>
            <radio></radio>{{ item.text }}
        </label>
    </view>
    <!-- 全选按钮 -->
    <label> <radio></radio>全选</label></template><script>
    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>

Cela ressemble à beaucoup de code, mais en fait, ce ne sont que des jugements logiques très basiques.

L'effet final est le suivant : Tout sélectionner :

Sélection multiple :

🎜🎜🎜Tout sélectionner inversé : 🎜🎜🎜🎜Recommandé : "🎜tutoriel uniapp🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!