通常我們都要獲取原始數(shù)據(jù)中的某個(gè)鍵值，可在“key”中填進(jìn)想要獲取的鍵值，“result”就是被選中的項(xiàng)了。
有時(shí)，我們需要返回一個(gè)完整的對(duì)象修改一下代碼，當(dāng)不輸入key時(shí)，返回一個(gè)完整的對(duì)象數(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í)，返回來(lái)的數(shù)組中對(duì)象中并沒(méi)有與與原數(shù)據(jù)是相同的引用地址，當(dāng)需要使用array.$remove()函數(shù)時(shí)就會(huì)失敗，新增一個(gè)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
}

當(dāng)數(shù)據(jù)長(zhǎng)度大于2個(gè)時(shí)，需要判斷2N次，相當(dāng)消耗性能，優(yōu)化一下：

'check-all', {
  twoWay: true,
  params: ['checkData', 'result', 'key','relative'],
  /*checkData:列表數(shù)據(jù),
  result:返回的結(jié)果,
  key:列表數(shù)據(jù)中需要返回的字段,
  relative:是否返回與列表數(shù)據(jù)相同引用地址的選中結(jié)果*/
  bind() {
   /*提取被選中的項(xiàng)*/
  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ù)的每一個(gè)對(duì)象添加一個(gè)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});
  //當(dāng)列表發(fā)生變化時(shí)重新綁定
  this.vm.$watch(this.params.checkData, (data) => {
   if(!data.length) return
   this.addChecked();
  });
  },
  // checkAll發(fā)生更改時(shí) 
  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()
  },
 }

這時(shí)只需要判斷N+1次。

以上是“Vue自定義指令如何實(shí)現(xiàn)checkbox全選功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！