Beispiele zur Erläuterung, wie Uniapp die All-Select-Funktion von Multi-Select-Boxen implementiert

Dieser Artikel vermittelt Ihnen relevantes Wissen über uniapp, das hauptsächlich die damit verbundenen Probleme der Implementierung der Funktion „Alle auswählen“ des Mehrfachauswahlfelds organisiert. Der Grund, warum die Funktion „Alle auswählen“ nicht implementiert werden kann, liegt darin, dass das aktivierte Feld von Das Kontrollkästchen wird dynamisch geändert, die Schnittstelle Der Status kann sich in Echtzeit ändern, aber das Änderungsereignis der Kontrollkästchengruppe kann nicht ausgelöst werden. Ich hoffe, es wird für alle hilfreich sein.

Empfohlen: „uniapp-Tutorial“

Die integrierten checkbox und checkbox-group von uniapp sind eigentlich ganz gut, aber es gibt zwei Probleme: checkbox其实以及checkbox-group本来挺好的，但是有两个问题：

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

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

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

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

实现思路

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

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

1. Kann sich nicht auf seine Ereignisse verlassen, um alle Auswahlmöglichkeiten zu erreichen
2. Der Stil ist festgelegt und schwer zu ändern

Der Grund, warum sie nicht alle Auswahlmöglichkeiten erreichen können, ist:

Ich ändere dynamisch. Wenn ich das Feld <code>checked des Kontrollkästchens überprüfe, kann sich der Status auf der Schnittstelle in Echtzeit ändern, aber das change-Ereignis von checkbox-group kann nicht ausgelöst werden. Das bedeutet, dass man sich nicht darauf verlassen kann, dass checkbox-group die ausgewählten Optionen verwaltet.

Das heißt: Ich habe auf „Alle auswählen“ geklickt und es sah so aus, als wäre auf der Benutzeroberfläche „Alle“ ausgewählt. Dann habe ich eine der Optionen abgebrochen und das Änderungsereignis wurde ausgelöst, aber die ausgewählte Liste, die es mir zurückgab, war falsch. Das wird nicht funktionieren.

Also habe ich mir eine Lösung ausgedacht, um das Mehrfachauswahlfeld „Alle auswählen“ zu implementieren.

Implementierungsideen

Angesichts der oben genannten Probleme kann ich checkbox-group aufgeben. Dann habe ich übrigens checkbox aufgegeben. weil ich den Kreisstil des Radios bevorzuge.

Simulieren und generieren Sie zunächst einige Daten zur einfachen Anzeige. Der entscheidende Punkt der Daten besteht darin, ein Feld auszuwählen, und der Rest kann nach Belieben erledigt werden:

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

Dann brauchen wir ein Objekt zum Speichern der ausgewählten Dateninformationen unter Verwendung der Karte:

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

Dann müssen wir ein Optionsfeld-Klickereignis zum Auswählen oder Abwählen von Daten haben:

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

Und dann müssen wir ein Klickereignis für alle Auswahlen haben:

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

Tatsächlich handelt es sich bei den beiden oben genannten Klickereignissen um sehr grundlegende Beurteilungen sowie das Hinzufügen und Löschen von Daten. Nun stehen alle Funktionen zur Verfügung, schauen wir uns an, wie es auf der Seite steht:

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

Tatsächlich gibt es zwei Sätze von Radios, einer dient der Anzeige von Daten in einer Schleife und der andere ist eine Schaltfläche „Alles auswählen“.

Der komplette Code zusammengefügt:

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

Es scheint eine Menge Code zu sein, aber in Wirklichkeit handelt es sich alles um sehr grundlegende logische Urteile.

Der Endeffekt sieht so aus: Alles auswählen:

Mehrfachauswahl:

🎜🎜🎜Alles invers auswählen: 🎜🎜🎜🎜Empfohlen: „🎜uniapp-Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung, wie Uniapp die All-Select-Funktion von Multi-Select-Boxen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!