Vue自定義指令實現(xiàn)checkbox全選功能的方法
最近做的一個項目需要用到Vue實現(xiàn)全選功能,參考了一下網(wǎng)上的做法,發(fā)現(xiàn)用屬性計算的復用性不高,于是選用自定義指令,但網(wǎng)上的做法大多是會對原始數(shù)據(jù)有一定的格式要求,而且沒有返回結(jié)果,于是做了改進。
上代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input type="checkbox" v-model="allCheck" v-check-all="allCheck" check-data="list" result="customerResult" key="demo"> 全選 <ul> <li v-for="item in list"> <input type="checkbox" v-model="item.checked"> {{item.demo}} </li> </ul> <div > customerResult: {{customerResult}} </div> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: "#app", data:function(){ return { list:[{demo:1}, {demo:2}, {demo:3}], allCheck:'', customerResult:'', } }, directives: { 'check-all': { twoWay: true, params: ['checkData','result','key'], bind() { /*為原始數(shù)據(jù)的每一個對象添加一個checked屬性*/ this.vm[this.params.checkData].forEach((item)=>{ Vue.set(item,'checked',false) }); /*提取被選中的項*/ this.setValue=function(){ let result=[] this.vm[this.params.checkData].forEach((item) => { if(item.checked){ result.push(item[this.params.key]) } }); this.vm[this.params.result]=result } /*如果所有的列表的checked屬性都為true,則選中全選框,否則不選中全選框 */ this.vm.$watch(this.params.checkData, (data) => { if(data.every((item) => item.checked)) { this.set(true); } else { this.set(false); } this.setValue() }, {deep: true}); }, // checkAll發(fā)生更改時 update(checkAll) { /*如果全選框被選中,則將列表的所有checked屬性轉(zhuǎn)為true,否則轉(zhuǎn)為false */ if(checkAll) { this.vm[this.params.checkData].forEach((item) => { item.checked = true; }); } else { this.vm[this.params.checkData].forEach((item) => { item.checked = false; }); } this.setValue() }, }, } }) </script> </body> </html>
通常我們都要獲取原始數(shù)據(jù)中的某個鍵值,可在“key”中填進想要獲取的鍵值,“result”就是被選中的項了。
有時,我們需要返回一個完整的對象修改一下代碼,當不輸入key時,返回一個完整的對象數(shù)組
this.setValue=()=>{ let result=[] this.vm[this.params.checkData].forEach((item) => { //刪除checked屬性 let temp={}; (()=>delete Object.assign(temp,item).checked)(); item.checked?result.push(item[this.params.key]||temp):""; }); this.vm[this.params.result]=result }
但時,這時,返回來的數(shù)組中對象中并沒有與與原數(shù)據(jù)是相同的引用地址,當需要使用array.$remove()函數(shù)時就會失敗,新增一個relative參數(shù),用戶自定義判斷返回的數(shù)據(jù)是否與原始數(shù)據(jù)關(guān)聯(lián)
this.setValue = () => { let result = [] this.vm[this.params.checkData].forEach((item) => { if(this.params.relative) { item.checked ? result.push(item) : ""; }else{ //刪除checked屬性 let temp = {}; (() => delete Object.assign(temp, item).checked)(); item.checked ? result.push(item[this.params.key] || temp) : ""; } }); this.vm[this.params.result] = result }
當數(shù)據(jù)長度大于2個時,需要判斷2N次,相當消耗性能,優(yōu)化一下:
'check-all', { twoWay: true, params: ['checkData', 'result', 'key','relative'], /*checkData:列表數(shù)據(jù), result:返回的結(jié)果, key:列表數(shù)據(jù)中需要返回的字段, relative:是否返回與列表數(shù)據(jù)相同引用地址的選中結(jié)果*/ bind() { /*提取被選中的項*/ this.setValue = () => { let result = [] if (this.params.relative) { this.vm[this.params.checkData].forEach((item) => { item.checked ? result.push(item) : ""; }); } else { this.vm[this.params.checkData].forEach((item) => { //刪除checked屬性 let temp = {}; (() => delete Object.assign(temp, item).checked)(); item.checked ? result.push(item[this.params.key] || temp) : ""; }); } this.vm[this.params.result] = result }; /*為原始數(shù)據(jù)的每一個對象添加一個checked屬性*/ this.addChecked = () => { this.vm[this.params.checkData].forEach((item) => { Vue.set(item, 'checked', false) }); }; /*如果所有的列表的checked屬性都為true,則選中全選框,否則不選中全選框 */ this.vm.$watch(this.params.checkData, (data) => { if(!data.length) return; data.every((item) => item.checked) ? this.set(true) : this.set(false); this.setValue() }, {deep: true}); //當列表發(fā)生變化時重新綁定 this.vm.$watch(this.params.checkData, (data) => { if(!data.length) return this.addChecked(); }); }, // checkAll發(fā)生更改時 update(checkAll) { /*如果全選框被選中,則將列表的所有checked屬性轉(zhuǎn)為true,否則轉(zhuǎn)為false */ checkAll ? this.vm[this.params.checkData].forEach((item) => { item.checked = true }) : this.vm[this.params.checkData].forEach((item) => { item.checked = false }); this.setValue() }, }
這時只需要判斷N+1次。
以上這篇Vue自定義指令實現(xiàn)checkbox全選功能的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明
這篇文章主要介紹了vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08unplugin-auto-import與unplugin-vue-components安裝問題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02vue select二級聯(lián)動第二級默認選中第一個option值的實例
下面小編就為大家分享一篇vue select二級聯(lián)動第二級默認選中第一個option值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01