uniapp多選框全選功能的實現(xiàn)思路與方法實例
前言
uniapp內(nèi)置的checkbox
其實以及checkbox-group
本來挺好的,但是有兩個問題:
- 無法依賴其事件實現(xiàn)全選
- 樣式固定,難以修改
他們無法實現(xiàn)全選的原因是:
我動態(tài)修改checkbox
的checked
字段時,界面上的狀態(tài)能夠?qū)崟r變化,但是無法觸發(fā)checkbox-group
的change
事件。意味著無法依賴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ù)對象,要是響應式的 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: "標題" + i, selected: false, }); } </script>
然后我們需要有一個存儲已選擇數(shù)據(jù)信息的對象,采用map:
// 存儲已選內(nèi)容, 因為這個列表是增刪很頻繁的,所以選用map而不是數(shù)組,key對應的是數(shù)據(jù)的下標。至于value存放什么,完全由自己定 let selected = reactive(new Map<number, number>());
在然后我們得有一個選項框點擊事件,用于選擇數(shù)據(jù)或者取消選擇:
// 選項框點擊事件,參數(shù)是數(shù)據(jù)的下標 function checkbox(index: number) { // 選中的狀態(tài)下再次點擊,即為取消選中 if (data[index].selected) { data[index].selected = false; selected.delete(index); // 然后刪除對應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是對應的下標index,而value是可以自定義的 element.selected = true; // 設為選中 } }); } }
其實上面兩個點擊事件都是很基本的判斷和增刪數(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ù)對象,要是響應式的 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: "標題" + i, selected: false, }); } // 存儲已選內(nèi)容, 因為這個列表是增刪很頻繁的,所以選用map而不是數(shù)組,key對應的是數(shù)據(jù)的下標。至于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是對應的下標index,而value是可以自定義的 element.selected = true; // 設為選中 } }); } } // 選項框點擊事件,參數(shù)是數(shù)據(jù)的下標 function checkbox(index: number) { // 選中的狀態(tài)下再次點擊,即為取消選中 if (data[index].selected) { data[index].selected = false; selected.delete(index); // 然后刪除對應key即可 } // 未選中狀態(tài)下點擊 else { data[index].selected = true; selected.set(index, data[index].id); } } </script> <style></style>
看起來代碼不少,其實都是很基礎的邏輯判斷。
最后效果是這樣的:
全選:
多選:
反選全部:
總結(jié)
到此這篇關于uniapp多選框全選功能實現(xiàn)的文章就介紹到這了,更多相關uniapp多選框全選功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
ES6 Iterator遍歷器原理,應用場景及相關常用知識拓展詳解
這篇文章主要介紹了ES6 Iterator遍歷器原理,應用場景及相關常用知識拓展,結(jié)合實例形式詳細分析了ES6 Iterator遍歷器具體原理、功能、用法、應用場景及知識拓展,需要的朋友可以參考下2020-02-02javascript 原型模式實現(xiàn)OOP的再研究
目前網(wǎng)絡上有關javascript實現(xiàn)OOP模式的方案基本上都是prototype模式,一般性的示例代碼如下2009-04-04