<script setup lang="ts">
    import { reactive } from "vue";
    // 模擬的數(shù)據(jù)對象，要是響應(yīng)式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成數(shù)據(jù)
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "標(biāo)題" + i,
            selected: false,
        });
    }
</script>

然后我們需要有一個存儲已選擇數(shù)據(jù)信息的對象，采用map：

    // 存儲已選內(nèi)容， 因為這個列表是增刪很頻繁的，所以選用map而不是數(shù)組，key對應(yīng)的是數(shù)據(jù)的下標(biāo)。至于value存放什么，完全由自己定
    let selected = reactive(new Map<number, number>());

在然后我們得有一個選項框點擊事件，用于選擇數(shù)據(jù)或者取消選擇：

    // 選項框點擊事件，參數(shù)是數(shù)據(jù)的下標(biāo)
    function checkbox(index: number) {
        // 選中的狀態(tài)下再次點擊，即為取消選中
        if (data[index].selected) {
            data[index].selected = false;
            selected.delete(index); // 然后刪除對應(yīng)key即可
        }
        // 未選中狀態(tài)下點擊
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }

再再然后，我們還得有一個全選的點擊事件：

    // 全選與反選事件
    function allSelect() {
        // 已經(jīng)全選情況下，就是反選，全選就說明長度一樣
        if (selected.size === data.length) {
            selected.clear(); // 全部清除
            data.forEach((element) => {
                element.selected = false; // 全部不選，就行了
            });
        }
        // 還未全選的狀態(tài)下
        else {
            data.forEach((element, index) => {
                // 因為可能存在部分已經(jīng)選擇了，所以得先判斷是否已存在，不存在才需要添加
                if (!selected.has(index)) {
                    selected.set(index, element.id); // key是對應(yīng)的下標(biāo)index，而value是可以自定義的
                    element.selected = true; // 設(shè)為選中
                }
            });
        }
    }

其實上面兩個點擊事件都是很基本的判斷和增刪數(shù)據(jù)。至此功能已經(jīng)全部都有了，下面看看頁面怎么寫：

<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，一個是循環(huán)展示數(shù)據(jù)，一個是全選按鈕。

連起來的完整代碼：

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

    // 模擬的數(shù)據(jù)對象，要是響應(yīng)式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成數(shù)據(jù)
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "標(biāo)題" + i,
            selected: false,
        });
    }

    // 存儲已選內(nèi)容， 因為這個列表是增刪很頻繁的，所以選用map而不是數(shù)組，key對應(yīng)的是數(shù)據(jù)的下標(biāo)。至于value存放什么，完全由自己定
    let selected = reactive(new Map<number, number>());

    // 全選與反選事件
    function allSelect() {
        // 已經(jīng)全選情況下，就是反選，全選就說明長度一樣
        if (selected.size === data.length) {
            selected.clear(); // 全部清除
            data.forEach((element) => {
                element.selected = false; // 全部不選，就行了
            });
        }
        // 還未全選的狀態(tài)下
        else {
            data.forEach((element, index) => {
                // 因為可能存在部分已經(jīng)選擇了，所以得先判斷是否已存在，不存在才需要添加
                if (!selected.has(index)) {
                    selected.set(index, element.id); // key是對應(yīng)的下標(biāo)index，而value是可以自定義的
                    element.selected = true; // 設(shè)為選中
                }
            });
        }
    }

    // 選項框點擊事件，參數(shù)是數(shù)據(jù)的下標(biāo)
    function checkbox(index: number) {
        // 選中的狀態(tài)下再次點擊，即為取消選中
        if (data[index].selected) {
            data[index].selected = false;
            selected.delete(index); // 然后刪除對應(yīng)key即可
        }
        // 未選中狀態(tài)下點擊
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }
</script>
<style></style>

看起來代碼不少，其實都是很基礎(chǔ)的邏輯判斷。

最后效果是這樣的：

全選：