Vue自定义指令实现checkbox全选功能的方法

2019-11-19 14:16:39

字体：大中小

来源：转载

供稿：网友

最近做的一个项目需要用到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}

但时，这时，返回来的数组中对象中并没有与与原数据是相同的引用地址，当需要使用array.$remove()函数时就会失败，新增一个relative参数，用户自定义判断返回的数据是否与原始数据关联

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}

当数据长度大于2个时，需要判断2N次，相当消耗性能，优化一下：

'check-all', {  twoWay: true,  params: ['checkData', 'result', 'key','relative'],  /*checkData:列表数据,  result:返回的结果,  key:列表数据中需要返回的字段,  relative:是否返回与列表数据相同引用地址的选中结果*/  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  };   /*为原始数据的每一个对象添加一个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});  //当列表发生变化时重新绑定  this.vm.$watch(this.params.checkData, (data) => {   if(!data.length) return   this.addChecked();  });  },  // checkAll发生更改时   update(checkAll) {   /*如果全选框被选中,则将列表的所有checked属性转为true,否则转为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自定义指令实现checkbox全选功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：Node.js中DNS模块学习总结

下一篇：如何在vue中使用ts的示例代码