最近做的一個項目需要用到Vue實現全選功能，參考了一下網上的做法，發現用屬性計算的復用性不高，于是選用自定義指令，但網上的做法大多是會對原始數據有一定的格式要求，而且沒有返回結果，于是做了改進。
上代碼：
<!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() { /*為原始數據的每一個對象添加一個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發生更改時 update(checkAll) { /*如果全選框被選中,則將列表的所有checked屬性轉為true,否則轉為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>通常我們都要獲取原始數據中的某個鍵值，可在“key”中填進想要獲取的鍵值，“result”就是被選中的項了。
有時，我們需要返回一個完整的對象修改一下代碼，當不輸入key時，返回一個完整的對象數組
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}
新聞熱點
疑難解答
圖片精選
