快捷導(dǎo)航

Vue自定義指令實現(xiàn)checkbox全選功能的方法

更新時間：2018年02月28日 10:54:12 作者：ClydeKuo

下面小編就為大家分享一篇Vue自定義指令實現(xiàn)checkbox全選功能的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

最近做的一個項目需要用到Vue實現(xiàn)全選功能，參考了一下網(wǎng)上的做法，發(fā)現(xiàn)用屬性計算的復(fù)用性不高，于是選用自定義指令，但網(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: