vue+elementUI 添加多个可以全选的多选框
生活随笔
收集整理的這篇文章主要介紹了
vue+elementUI 添加多个可以全选的多选框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
elementUI-checkbox官網：https://element.eleme.cn/#/zh-CN/component/checkbox
一、要做上面這種效果，首先要了解全選框中indeterminate 狀態和v-model的變量的關系 參考 -Dayer-：
<el-checkbox :indeterminate="isIndeterminate" v-model="selected" @change="handleCheckAllChange($event, 'hd')">華東</el-checkbox>對于indeterminate和v-model綁定的isIndeterminate和selected的值分別為：
| true | true或false | 樣式為 -，不確定狀態 |
| false | true | 樣式為 √，被選中狀態 |
| false | false | 不勾，沒有被選中 |
總結：isIndeterminate 在全選和未被全選狀態下都是 false，其他狀態下是 true； selected 只有全選狀態下是 true，其他都是 false（或者你也可以設置成：只要子級被選中，那么selected=true，子級一個都沒有被選，selected=false。我在這里用的是第一個）。
二、具體案例參考：https://www.jb51.net/article/148826.htm
1. 做這種有多個全選復選框的，最好是讓后臺幫忙加一下字段，不然就跟官網上的案例一樣，每個一級菜單下添加一個數組變量用來存放數據。
字段isIndeterminate（全選復選框顯示狀態），selected（CheckBox選中狀態，是否被選中）。
在一級菜單下添加：isIndeterminate、 selected，二級菜單下每條數據只要添加 selected 就行了。
2. 思路
注釋部分有很多是廢話，方便理解，開發時可以刪除，留下自己認為比較重要的注釋就可以啦~
3. 具體代碼
（1）模板部分代碼：
（2）全選復選框，和單個選擇復選框的方法：
// 是否全選 allCheckboxGroup(e,preList,sonList){console.log(e , preList, sonList)if( e ){ //這里的e就是一級菜單的selectedif( sonList ){//不論子菜單是否被選中，只要一級菜單被選中，讓該子菜單的selected都=true；for(let i = 0 ;i < sonList.length; i++){sonList[i].selected = true;}//因為在選中部分子菜單的情況下，再點擊全選按鈕。這種情況也能使一級菜單的selected=true，//此時一級菜單的isIndeterminate=true（且這種情況只有 子菜單存在 才能發生）。//但是只要被全選，一級菜單的isIndeterminate就要=false。preList.isIndeterminate = false; }} else {//因為讓一級菜單的selected=false只有在全部都被選中的情況下發生，所以一級菜單的isIndetermainate是一直=false的if( sonList ) {for(let i = 0 ;i < sonList.length; i++){sonList[i].selected = false;}}}//要知道，讓一級菜單的isIndeterminate=true，都是必須要操作子菜單才能做到的 },//單個選擇 checkOneBox(preList,sonList){//tickCount選了的總量，unTickCount沒選數量 這里的 e就是當前復選框的selected值var tickCount = 0, unTickCount = 0, len = sonList.lengthfor(let i=0; i<len; i++){if( sonList[i].selected == true) tickCount++;if( sonList[i].selected == false) unTickCount++;}if(tickCount == len){ //選中數量=子級總數，全選preList.selected = true;preList.isIndeterminate = false;} else if ( unTickCount == len ){ //未選中數量=子級總數，未全選preList.selected = false;preList.isIndeterminate = false;} else { //其他情況是不確定狀態preList.selected = false;preList.isIndeterminate = true;} },（3） 因為我這是在彈框中寫的，這里將打開彈框和關閉彈框時的操作貼一下：
我這邊的需求是，只要選了子菜單，那么該子菜單的父級菜單（一級菜單）也要被添加。
打開elementUI彈框這一部分可以看我另一篇博客 elementUI清空彈框中的表單數據
（4）提交數據
//提交查詢、添加、修改 onSubmit(formName) {this.$refs.addForm.validate(valid => {if (valid) {this.isDialog = false;//將已經選中的復選框的值處理一下，放到arr中let arr = [];for(let i =0 ;i<this.selectMenuArr.length; i++){if(this.selectMenuArr[i].selected){ //selected=true.有子說明全選，無子說明只有一個菜單且被選中if(this.selectMenuArr[i].list){for(let j=0; j<this.selectMenuArr[i].list.length; j++){arr.push(this.selectMenuArr[i].list[j].menuId);}}arr.push(this.selectMenuArr[i].menuId);} else {if(this.selectMenuArr[i].isIndeterminate){//isIndeterminate=true.說明一定有子，且選了一部分for(let j=0; j<this.selectMenuArr[i].list.length; j++){if(this.selectMenuArr[i].list[j].selected){arr.push(this.selectMenuArr[i].list[j].menuId);}}arr.push(this.selectMenuArr[i].menuId);}}}//添加 if (formName === 'addForm') { //因為我這邊后臺要求傳字符串，且修改時，要角色菜單為發生變化就傳 null。this.addForm.menuIds = arr.length == 0 ? "" : arr.sort(function(a,b){return a-b;}).join();//------添加接口-------}//修改else if (formName === 'updateForm') {//判斷角色是否修改，沒修改傳 null，修改了傳字符 this.addForm.menuIds = this.menuIdsArr.sort(function(a,b){return a-b;}).join() == arr.sort(function(a,b){return a-b;}).join() ? null : arr.sort(function(a,b){return a-b;}).join();//------修改接口-------}} else {return false;}}); },（5）獲取復選框的動態數據：
selectRoleMenus(){this.$axios.post("接口").then(res => {this.storageArr = res.list;//因為在選擇復選框時會操作到selectMenuArr ，而我們打開添加彈框時需要初始數據，所以將初始數據保留一份。this.selectMenuArr = res.list; }) } //記得在created中使用方法。補充：
1. 比較兩個數組是否相等 是否擁有相同元素：
<script type="text/javascript">alert([1,2,3].toString()== [3,2,1].toString());alert([1,2,3].sort(function(a,b){return a-b;}).toString()== [3,2,1].sort(function(a,b){return a-b;}).toString()); </script>2. 從接口獲取的數據 同時賦值給兩個變量，改變其中一個變量時，另一個變量的值也會改變：
引用數據類型賦值時只是給變量保存一個指針，指向存儲在堆中的對象，所以兩個變量實際上是指向的同一個地方。
解決方法是進行深度復制，因為在拷貝字符串時會開辟新的存儲地址，這樣就切斷了該對象的指針與其指向地址的聯系。（ 聽說如果拷貝對象包含正則表達式，函數，或者undefined等值時，深度烤貝會失效 ）
3. 根據某個特定的值刪除數組中的指定元素：
var arr = [2,3,5,9,54,21]; arr.splice( arr.indexOf(5), 1 ); //刪除數組中的5 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue+elementUI 添加多个可以全选的多选框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue+element 封装公共js代码
- 下一篇： vuex+element 从后台获取数据