Contoh untuk menerangkan cara uniapp melaksanakan fungsi semua pilihan kotak berbilang pilihan

Artikel ini membawakan anda pengetahuan yang berkaitan tentang uniapp Terutamanya mengatur isu yang berkaitan dengan melaksanakan fungsi pilih-semua kotak berbilang pilih Sebab mengapa pilih-semua tidak dapat dicapai ialah kotak semak diubah suai secara dinamik Apabila medan ditandakan, status pada antara muka boleh berubah dalam masa nyata, tetapi peristiwa perubahan kumpulan kotak tidak boleh dicetuskan. Saya harap ia akan membantu semua orang.

Disyorkan: "tutorial uniapp"

terbina dalam uniapp checkbox dan checkbox-group sebenarnya agak bagus, tetapi Terdapat dua masalah:

1. Tidak boleh bergantung pada acaranya untuk mencapai semua pilihan
2. Gaya tetap dan sukar untuk diubah suai

Sebab mengapa mereka tidak boleh mencapai semua pilihan ialah:
Apabila saya mengubah suai medan checkbox secara dinamik checked, status pada antara muka boleh berubah dalam masa nyata, tetapi peristiwa checkbox-group change tidak boleh dicetuskan. Ini bermakna anda tidak boleh bergantung pada checkbox-group untuk mengurus pilihan yang dipilih.

Maksudnya: Saya mengklik Pilih Semua, dan nampaknya Semua telah dipilih pada antara muka. Kemudian saya membatalkan salah satu pilihan dan peristiwa perubahan telah dicetuskan, tetapi senarai pilihan yang diberikannya kembali kepada saya adalah salah. Ini tidak akan berfungsi.

Jadi saya memikirkan penyelesaian untuk melaksanakan kotak berbilang pilihan pilih semua.

Idea Pelaksanaan

Memandangkan masalah di atas, anda boleh berputus asa checkbox-group Kemudian, saya berputus asa checkbox dengan cara, kerana saya lebih suka gaya bulatan radio.

Pertama, simulasi dan hasilkan beberapa data untuk paparan mudah Perkara utama data ialah mempunyai medan selected yang anda suka:

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

Kemudian kita perlu mempunyai medan untuk menyimpan maklumat data yang dipilih, menggunakan peta:

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

Kemudian kita perlu mempunyai acara klik kotak pilihan untuk memilih data atau nyahpilih:

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

Dan kemudian, kita perlu Terdapat acara klik untuk memilih semua:

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

Malah, dua peristiwa klik di atas adalah pertimbangan yang sangat asas dan menambah serta memadam data. Sekarang setelah semua fungsi tersedia, mari lihat bagaimana halaman itu ditulis:

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

Malah, terdapat dua set radio, satu adalah untuk memaparkan data dalam gelung, dan satu lagi adalah pilihan butang semua.

Kod lengkap disambungkan bersama:

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

Nampaknya seperti banyak kod, tetapi sebenarnya semuanya adalah pertimbangan logik yang sangat asas.

Kesan akhir adalah seperti ini:
Pilih semua:

Pilihan berbilang:

Sbalik pilih semua:

Disyorkan: "tutorial uniapp"

Atas ialah kandungan terperinci Contoh untuk menerangkan cara uniapp melaksanakan fungsi semua pilihan kotak berbilang pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!