站長(zhǎng)資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        實(shí)例講解uniapp實(shí)現(xiàn)多選框的全選功能

        本篇文章給大家?guī)?lái)了關(guān)于uniapp的相關(guān)知識(shí),其中主要整理了實(shí)現(xiàn)多選框的全選功能的相關(guān)問(wèn)題,無(wú)法實(shí)現(xiàn)全選的原因是動(dòng)態(tài)修改checkbox的checked字段時(shí),界面上的狀態(tài)能夠?qū)崟r(shí)變化,但是無(wú)法觸發(fā)checkbox-group的change事件,下面一起來(lái)看一下,希望對(duì)大家有幫助。

        實(shí)例講解uniapp實(shí)現(xiàn)多選框的全選功能

        推薦:《uniapp教程》

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

        1. 無(wú)法依賴其事件實(shí)現(xiàn)全選
        2. 樣式固定,難以修改

        他們無(wú)法實(shí)現(xiàn)全選的原因是:
        我動(dòng)態(tài)修改checkboxchecked字段時(shí),界面上的狀態(tài)能夠?qū)崟r(shí)變化,但是無(wú)法觸發(fā)checkbox-groupchange事件。意味著無(wú)法依賴checkbox-group管理好已選項(xiàng)。

        就是說(shuō):我點(diǎn)了全選,界面上看著是全選了。然后此時(shí)我取消了其中一個(gè)選項(xiàng),此時(shí)觸發(fā)change事件,但是它反饋給我的已選列表是錯(cuò)的。這是不行的。

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

        實(shí)現(xiàn)思路

        鑒于上面的問(wèn)題,于是就可以放棄checkbox-group了,那么,我順便就放棄了checkbox,因?yàn)槲腋矚gradio的圓圈樣式。

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

        <script setup lang="ts">     import { reactive } from "vue";     // 模擬的數(shù)據(jù)對(duì)象,要是響應(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>

        然后我們需要有一個(gè)存儲(chǔ)已選擇數(shù)據(jù)信息的對(duì)象,采用map:

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

        在然后我們得有一個(gè)選項(xiàng)框點(diǎn)擊事件,用于選擇數(shù)據(jù)或者取消選擇:

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

        再再然后,我們還得有一個(gè)全選的點(diǎn)擊事件:

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

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

        <template>     <!-- 是個(gè)多選列表 -->     <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>

        其實(shí)就兩組radio,一個(gè)是循環(huán)展示數(shù)據(jù),一個(gè)是全選按鈕。

        連起來(lái)的完整代碼:

        <template>     <!-- 是個(gè)多選列表 -->     <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ù)對(duì)象,要是響應(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,         });     }      // 存儲(chǔ)已選內(nèi)容, 因?yàn)檫@個(gè)列表是增刪很頻繁的,所以選用map而不是數(shù)組,key對(duì)應(yīng)的是數(shù)據(jù)的下標(biāo)。至于value存放什么,完全由自己定     let selected = reactive(new Map<number, number>());      // 全選與反選事件     function allSelect() {         // 已經(jīng)全選情況下,就是反選,全選就說(shuō)明長(zhǎng)度一樣         if (selected.size === data.length) {             selected.clear(); // 全部清除             data.forEach((element) => {                 element.selected = false; // 全部不選,就行了             });         }         // 還未全選的狀態(tài)下         else {             data.forEach((element, index) => {                 // 因?yàn)榭赡艽嬖诓糠忠呀?jīng)選擇了,所以得先判斷是否已存在,不存在才需要添加                 if (!selected.has(index)) {                     selected.set(index, element.id); // key是對(duì)應(yīng)的下標(biāo)index,而value是可以自定義的                     element.selected = true; // 設(shè)為選中                 }             });         }     }      // 選項(xiàng)框點(diǎn)擊事件,參數(shù)是數(shù)據(jù)的下標(biāo)     function checkbox(index: number) {         // 選中的狀態(tài)下再次點(diǎn)擊,即為取消選中         if (data[index].selected) {             data[index].selected = false;             selected.delete(index); // 然后刪除對(duì)應(yīng)key即可         }         // 未選中狀態(tài)下點(diǎn)擊         else {             data[index].selected = true;             selected.set(index, data[index].id);         }     }</script><style></style>

        看起來(lái)代碼不少,其實(shí)都是很基礎(chǔ)的邏輯判斷。

        最后效果是這樣的:
        全選:
        實(shí)例講解uniapp實(shí)現(xiàn)多選框的全選功能

        多選:
        實(shí)例講解uniapp實(shí)現(xiàn)多選框的全選功能

        反選全部:
        實(shí)例講解uniapp實(shí)現(xiàn)多選框的全選功能

        推薦:《uniapp教程》

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
        主站蜘蛛池模板: 一本色道久久88精品综合| 久久精品国产亚洲AV香蕉| 少妇人妻偷人精品视频| 97久视频精品视频在线老司机| 亚洲精品成人无码中文毛片不卡| 国产女人18毛片水真多18精品| 国产成人亚洲精品| 久久99精品久久只有精品| 亚洲精品尤物yw在线影院| 国产精品亚洲视频| 99久久99久久精品国产| 国产欧美久久久精品| 国产午夜无码精品免费看动漫| 亚洲永久精品ww47| 国产精品岛国久久久久| 99精品热这里只有精品| 亚洲精品无码永久中文字幕| 国产啪亚洲国产精品无码| 麻豆精品久久精品色综合| 91麻豆精品国产| 国产精品日韩AV在线播放 | 国产精品毛片VA一区二区三区| 亚洲欧美日韩国产精品| 久久久精品波多野结衣| 精品国产91久久久久久久a | 欧美亚洲精品在线| 无码精品久久一区二区三区| 国产精品一级AV在线播放| 69堂午夜精品视频在线| 青青草国产精品欧美成人| 国产精品亚洲片在线va| 第一福利永久视频精品| HEYZO无码综合国产精品227| 精品国产三级a∨在线欧美| 精品一区二区三区东京热| 国产精品久线在线观看| 99精品无人区乱码在线观看 | 精品无码人妻久久久久久| 国产精品亚洲欧美大片在线观看 | 国产精品美女一区二区视频| 久久精品水蜜桃av综合天堂 |