如何利用Vue.js指令实现全选功能

来源：动视网责编：小采时间：2020-11-27 19:34:58

如何利用Vue.js指令实现全选功能

如何利用Vue.js指令实现全选功能:这篇文章主要介绍了关于如何利用Vue.js指令实现全选功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，

推荐度：

点击下载本文 文档为doc格式

导读如何利用Vue.js指令实现全选功能:这篇文章主要介绍了关于如何利用Vue.js指令实现全选功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，

这篇文章主要介绍了关于如何利用Vue.js指令实现全选功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。下面就来介绍如何利用指令来实现全选。

因为刚开始接触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() {
 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);
};

如何利用Vue.js指令实现全选功能

推荐度：

点击下载本文 文档为doc格式

标签： VUE 怎么实现指令

热门焦点

如何利用Vue.js指令实现全选功能

如何利用Vue.js指令实现全选功能

如何利用Vue.js指令实现全选功能

最新推荐

猜你喜欢

热门推荐