利用Vue.js指令实现全选功能
|
因为刚开始接触vue不久，全选的实现参考了知乎上的实现方法： 1、从服务器拿到数据，为每个item设置checked属性 2、计算选中的数量selectCount,如果选中的数量与selectItems的数量相等，则全选selectAll选中 3、点全选时，将每个item的checked属性置为true，反选时置为false， 4、每次selectItems的属性发生变化时，都将checked的为true的item放入数组checkedGroups中 下面为实现代码：这种方法用起来不太方便，首先是很难复用，每次要用到的时候都需要写一次computed，其次是selectAll、checkedGroups、selectItems都已经固定，不太灵活。 所以在这次项目中，我用vue的指令重新实现了全选的功能，directive的思路其实跟computed差不多，先上代码： {
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;
});
}
},},};
调用：先说说这样用的优点：1、方便使用，在需要用的地方，写上 2、全选的model和数组名可以定制，用什么名字都可以，全选的model不想叫checkAll叫checkAllData也可以，数组不想叫checkData叫dataFromServer也可以。 在指令中，指定twoWay为true,就可以用 用 当指令值（checkAll）发生变化，如果为true，则将checkData的checked属性都设为true，否则为false。至此，一个全选的指令就完成了。 在做这个全选指令的时候，本来想用paramWatchers来监听checkData的变化的，但是发觉checkData变动时，并不会触发paramWatchers的回调，后来看了一下源码才发现，paramWatchers其实也是调用了 总结以上就是这篇文章的全部内容，有不对的地方，还请大家多多指教。希望这篇文章的内容对大家能有所帮助。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |