uniapp が複数選択ボックスの全選択機能を実装する方法を説明する例

この記事では、主に複数選択ボックスの全選択機能の実装に関連する問題を整理した uniapp に関する関連知識をお届けします。チェックボックスは動的に変更されます。フィールドがチェックされると、インターフェイス上のステータスはリアルタイムで変化しますが、チェックボックス グループの変更イベントはトリガーされません。見てみましょう。参考になれば幸いです。みんな。

推奨事項: 「uniapp チュートリアル 」

uniapp の組み込み checkbox は、実際には checkbox-group はもともと非常に優れていましたが、次の 2 つの問題があります。

1. イベントに依存してすべてを選択することはできません
2. スタイルが固定されており、実行が困難です。 modify

# #すべてを選択できない理由は次のとおりです。

checkbox の checked フィールドを動的に変更すると、インターフェイス上のステータスが変更される可能性があります。リアルタイムで変更されますが、チェックボックスをトリガーできません - グループの change イベント。これは、選択したオプションを管理するために checkbox-group に依存できないことを意味します。

つまり、[すべて選択] をクリックすると、インターフェイス上で [すべて] が選択されたように見えます。次に、オプションの 1 つをキャンセルすると、変更イベントがトリガーされましたが、フィードバックされた選択リストは間違っていました。これではうまくいきません。

そこで私は、全選択の複数選択ボックスを実装する解決策を思いつきました。

実装アイデア

上記の問題点を考慮すると、

checkbox-groupは諦めても良いと思います。 , 私はラジオのサークル形式が好きなので。 最初に、簡単に表示できるようにいくつかのデータをシミュレートして生成します。データの重要な点は、フィールド selected

があることです。残りは自由に設定してください:

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

次に、ストレージを選択する必要があります。 データ情報のオブジェクトはマップを使用します。

    // 存储已选内容， 因为这个列表是增删很频繁的，所以选用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);
        }
    }

そして、すべてを選択するには Click イベントが必要です:

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

実際、上記の 2 つのクリック イベントは非常に基本的な判断とデータの追加と削除です。これですべての機能が利用できるようになりました。ページがどのように記述されているか見てみましょう:

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

実際には、ラジオのセットが 2 つあり、1 つはデータをループで表示するもので、もう 1 つはすべて選択ボタンです。

結合された完全なコード:

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

たくさんのコードのように見えますが、実際にはすべて非常に基本的な論理的判断です。

最終的な効果は次のようになります:

すべて選択:

複数選択:

すべてを反転:

推奨: 「uniapp チュートリアル

」

以上がuniapp が複数選択ボックスの全選択機能を実装する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。