欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp多選框全選功能的實現(xiàn)思路與方法實例

 更新時間:2022年08月26日 10:52:06   作者:lsjweiyi  
uniapp給我們提供了tabs組件進(jìn)行單項的切換,但是多選的效果需要我們自己去手寫,下面這篇文章主要給大家介紹了關(guān)于uniapp多選框全選功能實現(xiàn)思路與方法的相關(guān)資料,需要的朋友可以參考下

前言

uniapp內(nèi)置的checkbox其實以及checkbox-group本來挺好的,但是有兩個問題:

  • 無法依賴其事件實現(xiàn)全選
  • 樣式固定,難以修改

他們無法實現(xiàn)全選的原因是:

我動態(tài)修改checkboxchecked字段時,界面上的狀態(tài)能夠?qū)崟r變化,但是無法觸發(fā)checkbox-groupchange事件。意味著無法依賴checkbox-group管理好已選項。

就是說:我點了全選,界面上看著是全選了。然后此時我取消了其中一個選項,此時觸發(fā)change事件,但是它反饋給我的已選列表是錯的。這是不行的。

所以我自己想了個實現(xiàn)全選多選框的方案。

實現(xiàn)思路

鑒于上面的問題,于是就可以放棄checkbox-group了,那么,我順便就放棄了checkbox,因為我更喜歡radio的圓圈樣式。

首先先模擬生成一些數(shù)據(jù),方便展示,數(shù)據(jù)的要點是要有一個字段selected,其余隨心所欲:

<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ǔ)的邏輯判斷。

最后效果是這樣的:

全選:

多選:

反選全部:

總結(jié) 

到此這篇關(guān)于uniapp多選框全選功能實現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp多選框全選功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • ES6 Iterator遍歷器原理,應(yīng)用場景及相關(guān)常用知識拓展詳解

    ES6 Iterator遍歷器原理,應(yīng)用場景及相關(guān)常用知識拓展詳解

    這篇文章主要介紹了ES6 Iterator遍歷器原理,應(yīng)用場景及相關(guān)常用知識拓展,結(jié)合實例形式詳細(xì)分析了ES6 Iterator遍歷器具體原理、功能、用法、應(yīng)用場景及知識拓展,需要的朋友可以參考下
    2020-02-02
  • 分享JavaScript?中的幾種繼承方式

    分享JavaScript?中的幾種繼承方式

    這篇文章主要介紹了分享JavaScript?中的幾種繼承方式,JavaScript中的繼承主要是通過原型鏈實現(xiàn)的,具體實現(xiàn)需要的小伙伴可以參考下面文章詳細(xì)內(nèi)容
    2022-05-05
  • 詳解開源的JavaScript插件化框架MinimaJS

    詳解開源的JavaScript插件化框架MinimaJS

    這篇文章主要介紹了開源的JavaScript插件化框架MinimaJS的詳解,詳細(xì)的介紹了MinimaJS的使用,具有一定的參考價值,有興趣的可以了解一下
    2017-10-10
  • javascript封裝 Cookie 應(yīng)用接口

    javascript封裝 Cookie 應(yīng)用接口

    本文通過幾個簡單的示例向大家展示了javascript封裝cookie的注意事項及操作方法,非常的簡單實用,最后附上一則具體實例,有需要的小火把可以參考下。
    2015-08-08
  • JS實現(xiàn)勻速運動的代碼實例

    JS實現(xiàn)勻速運動的代碼實例

    這篇文章主要介紹了JS實現(xiàn)勻速運動的代碼實例,有需要的朋友可以參考一下
    2013-11-11
  • 如何使用gpu.js改善JavaScript的性能

    如何使用gpu.js改善JavaScript的性能

    這篇文章主要介紹了如何使用gpu.js改善JavaScript的性能,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2020-12-12
  • Javascript閉包實例詳解

    Javascript閉包實例詳解

    閉包就是函數(shù)的局部變量集合,只是這些局部變量在函數(shù)返回后會繼續(xù)存在,本文通過代碼實例給大家介紹javascript閉包,對javascipt閉包相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-11-11
  • JS實現(xiàn)的透明度漸變動畫效果示例

    JS實現(xiàn)的透明度漸變動畫效果示例

    這篇文章主要介紹了JS實現(xiàn)的透明度漸變動畫效果,涉及javascript響應(yīng)鼠標(biāo)事件針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2018-04-04
  • javascript 原型模式實現(xiàn)OOP的再研究

    javascript 原型模式實現(xiàn)OOP的再研究

    目前網(wǎng)絡(luò)上有關(guān)javascript實現(xiàn)OOP模式的方案基本上都是prototype模式,一般性的示例代碼如下
    2009-04-04
  • JS實現(xiàn)深拷貝的幾種簡單方法示例

    JS實現(xiàn)深拷貝的幾種簡單方法示例

    深拷貝和淺拷貝是在JavaScript中復(fù)制對象或數(shù)組時經(jīng)常遇到的概念,下面這篇文章主要給大家介紹了關(guān)于JS實現(xiàn)深拷貝的幾種簡單方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10

最新評論