前端之家收集整理的这篇文章主要介绍了
利用Vue.js指令实现全选功能,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法:
1、从服务器拿到数据,为每个item设置checked属性
2、计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中
3、点全选时,将每个item的checked属性置为true,反选时置为false,
4、每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中
下面为实现代码:
Box绑定的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差不多,先上代码:
{
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;
});
}
},},};
Box" v-model="checkAll" v-check-all="checkAll" check-data="checkData">
- Box" v-model="item.checked">
{{item.text}}
先说说这样用的优点:
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
,但是不支持深度检测:
总结
以上就是这篇文章的全部内容,有不对的地方,还请大家多多指教。希望这篇文章的内容对大家能有所帮助。