利用Vue.js指令实现全选功能
因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法:
1、从服务器拿到数据,为每个item设置checked属性
2、计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中
3、点全选时,将每个item的checked属性置为true,反选时置为false,
4、每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中
下面为实现代码:
//全选 data:function(){ return{ selectItems:[],//从服务器拿到的数据 } }, computed:{ //全选checkbox绑定的model selectAll:{ get:function(){ returnthis.selectCount==this.selectItems.length; }, set:function(value){ this.selectItems.forEach(function(item){ item.checked=value; }); returnvalue; } }, //选中的数量 selectCount:{ get:function(){ vari=0; this.selectItems.forEach(function(item){ if(item.checked){ i++; } }); returni; } }, //选中的数组 checkedGroups:{ get:function(){ varcheckedGroups=[]; this.selectItems.forEach(function(item){ if(item.checked){ checkedGroups.push(item); } }); returncheckedGroups; } } }
这种方法用起来不太方便,首先是很难复用,每次要用到的时候都需要写一次computed,其次是selectAll、checkedGroups、selectItems都已经固定,不太灵活。
所以在这次项目中,我用vue的指令重新实现了全选的功能,directive的思路其实跟computed差不多,先上代码:
exportdefault{ 'check-all':{ twoWay:true, params:['checkData'], bind(){ /** -如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */ this.vm.$watch(this.params.checkData,(checkData)=>{ if(checkData.every((item)=>item.checked)){ this.set(true); }else{ this.set(false); } },{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; }); } }, }, };
调用:
<inputtype="checkbox"v-model="checkAll"v-check-all="checkAll"check-data="checkData"> <ul> <liv-for="itemincheckData"> <inputtype="checkbox"v-model="item.checked"> {{item.text}} </li> </ul>
先说说这样用的优点:
1、方便使用,在需要用的地方,写上v-check-all指令和check-data就可以
2、全选的model和数组名可以定制,用什么名字都可以,全选的model不想叫checkAll叫checkAllData也可以,数组不想叫checkData叫dataFromServer也可以。
在指令中,指定twoWay为true,就可以用this.set(value)来设置checkAll的值,用params接收绑定指令元素上的属性值checkData,也就是需要操作的数组。
用this.vm获取使用指令的上下文,调用上下文的$watch来监听checkData的变化,如果checkData全部选中,则设置checkAll为true,否则设置checkAll为false。
当指令值(checkAll)发生变化,如果为true,则将checkData的checked属性都设为true,否则为false。至此,一个全选的指令就完成了。
在做这个全选指令的时候,本来想用paramWatchers来监听checkData的变化的,但是发觉checkData变动时,并不会触发paramWatchers的回调,后来看了一下源码才发现,paramWatchers其实也是调用了$watch,但是不支持深度检测:
Directive.prototype._setupParamWatcher=function(key,expression){ varself=this; varcalled=false; varunwatch=(this._scope||this.vm).$watch(expression,function(val,oldVal){ self.params[key]=val; //sinceweareinimmediatemode, //onlycalltheparamchangecallbacksifthisisnotthefirstupdate. if(called){ varcb=self.paramWatchers&&self.paramWatchers[key]; if(cb){ cb.call(self,val,oldVal); } }else{ called=true; } },{ immediate:true, user:false });(this._paramUnwatchFns||(this._paramUnwatchFns=[])).push(unwatch); };
总结
以上就是这篇文章的全部内容,有不对的地方,还请大家多多指教。希望这篇文章的内容对大家能有所帮助。