利用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绑定的modelselectAll: { get: function（） {return this.selectCount == this.selectItems.length; }, set: function（value） {this.selectItems.forEach（function（item） { item.checked = value;}）;return value; }},//选中的数量selectCount: { get: function（） {var i = 0;this.selectItems.forEach（function（item） { if （item.checked） {i++; }}）;return i; }},//选中的数组checkedGroups: { get: function（） {var checkedGroups = [];this.selectItems.forEach（function（item） { if （item.checked） {checkedGroups.push（item）; }}）;return checkedGroups; }} }

这种方法用起来不太方便，首先是很难复用，每次要用到的时候都需要写一次computed，其次是selectAll、checkedGroups、selectItems都已经固定，不太灵活。
所以在这次项目中，我用vue的指令重新实现了全选的功能，directive的思路其实跟computed差不多，先上代码：

export default { "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;}）; }}, },};

调用：

<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData"><ul> <li v-for="item in checkData"><input type="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） { var self = this; var called = false; var unwatch = （this._scope || this.vm）.$watch（expression, function （val, oldVal） { self.params[key] = val; // since we are in immediate mode, // only call the param change callbacks if this is not the first update. if （called） {var cb = 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）;};

总结
以上就是这篇文章的全部内容，有不对的地方，还请大家多多指教。希望这篇文章的内容对大家能有所帮助。