Vue自定义指令实现checkbox全选功能的方法
最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进。
上代码:
全选
{{item.demo}} customerResult:{{customerResult}}
通常我们都要获取原始数据中的某个键值,可在“key”中填进想要获取的键值,“result”就是被选中的项了。
有时,我们需要返回一个完整的对象修改一下代码,当不输入key时,返回一个完整的对象数组
this.setValue=()=>{ letresult=[] this.vm[this.params.checkData].forEach((item)=>{ //删除checked属性 lettemp={}; (()=>deleteObject.assign(temp,item).checked)(); item.checked?result.push(item[this.params.key]||temp):""; }); this.vm[this.params.result]=result }
但时,这时,返回来的数组中对象中并没有与与原数据是相同的引用地址,当需要使用array.$remove()函数时就会失败,新增一个relative参数,用户自定义判断返回的数据是否与原始数据关联
this.setValue=()=>{ letresult=[] this.vm[this.params.checkData].forEach((item)=>{ if(this.params.relative){ item.checked?result.push(item):""; }else{ //删除checked属性 lettemp={}; (()=>deleteObject.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=()=>{ letresult=[] 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属性 lettemp={}; (()=>deleteObject.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全选功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。