微客导航 » 文章资讯 » Vue自定义指令实现checkbox全选功能的方法

Vue自定义指令实现checkbox全选功能的方法

2023-09-15 23:32:05 277

最近做的一个项目需要用到Vue实现全选功能，参考了一下网上的做法，发现用属性计算的复用性不高，于是选用自定义指令，但网上的做法大多是会对原始数据有一定的格式要求，而且没有返回结果，于是做了改进。

上代码：









全选



{{item.demo}}



customerResult:{{customerResult}}

通常我们都要获取原始数据中的某个键值，可在“key”中填进想要获取的键值，“result”就是被选中的项了。
有时，我们需要返回一个完整的对象修改一下代码，当不输入key时，返回一个完整的对象数组

this.setValue=()=>{
letresult=[]
this.vm[this.params.checkData].forEach((item)=>{
//删除checked属性
lettemp={};
(()=>deleteObject.assign(temp,item).checked)();
item.checked?result.push(item[this.params.key]||temp):"";
});
this.vm[this.params.result]=result
}

但时，这时，返回来的数组中对象中并没有与与原数据是相同的引用地址，当需要使用array.$remove()函数时就会失败，新增一个relative参数，用户自定义判断返回的数据是否与原始数据关联

this.setValue=()=>{
letresult=[]
this.vm[this.params.checkData].forEach((item)=>{
if(this.params.relative){
item.checked?result.push(item):"";
}else{
//删除checked属性
lettemp={};
(()=>deleteObject.assign(temp,item).checked)();
item.checked?result.push(item[this.params.key]||temp):"";
}
});
this.vm[this.params.result]=result
}

当数据长度大于2个时，需要判断2N次，相当消耗性能，优化一下：

'check-all',{
twoWay:true,
params:['checkData','result','key','relative'],
/*checkData:列表数据,
result:返回的结果,
key:列表数据中需要返回的字段,
relative:是否返回与列表数据相同引用地址的选中结果*/
bind(){
/*提取被选中的项*/
this.setValue=()=>{
letresult=[]
if(this.params.relative){
this.vm[this.params.checkData].forEach((item)=>{
item.checked?result.push(item):"";
});
}else{
this.vm[this.params.checkData].forEach((item)=>{
//删除checked属性
lettemp={};
(()=>deleteObject.assign(temp,item).checked)();
item.checked?result.push(item[this.params.key]||temp):"";
});
}
this.vm[this.params.result]=result
};
/*为原始数据的每一个对象添加一个checked属性*/
this.addChecked=()=>{
this.vm[this.params.checkData].forEach((item)=>{
Vue.set(item,'checked',false)
});
};
/*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框*/
this.vm.$watch(this.params.checkData,(data)=>{
if(!data.length)return;
data.every((item)=>item.checked)?this.set(true):this.set(false);
this.setValue()
},{deep:true});
//当列表发生变化时重新绑定
this.vm.$watch(this.params.checkData,(data)=>{
if(!data.length)return
this.addChecked();
});
},
//checkAll发生更改时
update(checkAll){
/*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false*/
checkAll?this.vm[this.params.checkData].forEach((item)=>{
item.checked=true
}):this.vm[this.params.checkData].forEach((item)=>{
item.checked=false
});
this.setValue()
},
}

这时只需要判断N+1次。

以上这篇Vue自定义指令实现checkbox全选功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue自定义指令实现checkbox全选功能的方法

热门推荐

随机推荐