- 当前位置：首页 >数据库 >如何用Vue实现一个全选指令
如何用Vue实现一个全选指令
发布时间：2025-11-05 02:40:11 来源：创站工坊 作者：域名
最近用vue做了两个项目，何用都需要实现全选反选的全选功能，两个项目用了两种实现方法，指令***个项目用vue的何用computed，第二个项目用指令来实现，全选用起来，指令发觉指令更加方便。何用
***次做全选的全选时候是刚开始接触vue不久，全选的指令实现参考了知乎(链接：https://www.zhihu.com/question/37833194/answer/91812053)上的实现方法：
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; } }, //选中的b2b供应网数量 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也可以。
在指令中，IT技术网指定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); };本人中途改行，入行1年出头，还有很多东西要学，有不对的地方，还请大家多多指教。为了勉励自己多些总结，开了个微信公众号(front-end-article)，最近都在用vue做项目，近期应该会写一些关于vue的文章。有兴趣可以关注一下哦，或者投稿也可以，多多交流哈。
- Copyright © 2025 Powered by 如何用Vue实现一个全选指令,创站工坊 滇ICP备2023006006号-44sitemap