最近做的一个项目需要用到Vue实现全选功能，参考了一下网上的做法，发现用属性计算的复用性不高，于是选用自定义指令，但网上的做法大多是会对原始数据有一定的格式要求，而且没有返回结果，于是做了改进。
上代码：
<Meta charset="UTF-8">
Box" v-model="allCheck" v-check-all="allCheck" check-data="list" result="customerResult" key="demo"> 全选
- Box" v-model="item.checked"> {{item.demo}}
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全选功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/33500.html