Vue自定义指令实现checkbox全选功能的方法
发布时间：2020-12-17 02:33:41 所属栏目：百科 来源：网络整理
导读：最近做的一个项目需要用到Vue实现全选功能，参考了一下网上的做法，发现用属性计算的复用性不高，于是选用自定义指令，但网上的做法大多是会对原始数据有一定的格式要求，而且没有返回结果，于是做了改进。 上代码： customerResult: {{customerResult}} 通
|
最近做的一个项目需要用到Vue实现全选功能，参考了一下网上的做法，发现用属性计算的复用性不高，于是选用自定义指令，但网上的做法大多是会对原始数据有一定的格式要求，而且没有返回结果，于是做了改进。 上代码：
customerResult: {{customerResult}}
通常我们都要获取原始数据中的某个键值，可在“key”中填进想要获取的键值，“result”就是被选中的项了。 有时，我们需要返回一个完整的对象修改一下代码，当不输入key时，返回一个完整的对象数组 {
let result=[]
this.vm[this.params.checkData].forEach((item) => {
//删除checked属性
let temp={};
(()=>delete Object.assign(temp,item).checked)();
item.checked?result.push(item[this.params.key]||temp):"";
});
this.vm[this.params.result]=result
}
但时，这时，返回来的数组中对象中并没有与与原数据是相同的引用地址，当需要使用array.$remove()函数时就会失败，新增一个relative参数，用户自定义判断返回的数据是否与原始数据关联 {
let result = []
this.vm[this.params.checkData].forEach((item) => {
if(this.params.relative) {
item.checked ? result.push(item) : "";
}else{
//删除checked属性
let temp = {};
(() => delete Object.assign(temp,item).checked)();
item.checked ? result.push(item[this.params.key] || temp) : "";
}
});
this.vm[this.params.result] = result
}
当数据长度大于2个时，需要判断2N次，相当消耗性能，优化一下： {
let result = []
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属性
let temp = {};
(() => delete Object.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,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) {
/*如果全选框被选中,否则转为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全选功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |