这篇文章主要介绍Vue自定义指令如何实现checkbox全选功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="allCheck" v-check-all="allCheck" check-data="list" result="customerResult" key="demo"> 全选
<ul>
<li v-for="item in list">
<input type="checkbox" v-model="item.checked">
{{item.demo}}
</li>
</ul>
<div >
customerResult: {{customerResult}}
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:function(){
return {
list:[{demo:1},
{demo:2},
{demo:3}],
allCheck:'',
customerResult:'',
}
},
directives: {
'check-all': {
twoWay: true,
params: ['checkData','result','key'],
bind() {
/*为原始数据的每一个对象添加一个checked属性*/
this.vm[this.params.checkData].forEach((item)=>{
Vue.set(item,'checked',false)
});
/*提取被选中的项*/
this.setValue=function(){
let result=[]
this.vm[this.params.checkData].forEach((item) => {
if(item.checked){
result.push(item[this.params.key])
}
});
this.vm[this.params.result]=result
}
/*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */
this.vm.$watch(this.params.checkData, (data) => {
if(data.every((item) => item.checked)) {
this.set(true);
} else {
this.set(false);
}
this.setValue()
}, {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;
});
}
this.setValue()
},
},
}
})
</script>
</body>
</html>通常我们都要获取原始数据中的某个键值，可在“key”中填进想要获取的键值，“result”就是被选中的项了。
有时，我们需要返回一个完整的对象修改一下代码，当不输入key时，返回一个完整的对象数组
this.setValue=()=>{
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参数，用户自定义判断返回的数据是否与原始数据关联
this.setValue = () => {
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次，相当消耗性能，优化一下：
'check-all', {
twoWay: true,
params: ['checkData', 'result', 'key','relative'],
/*checkData:列表数据,
result:返回的结果,
key:列表数据中需要返回的字段,
relative:是否返回与列表数据相同引用地址的选中结果*/
bind() {
/*提取被选中的项*/
this.setValue = () => {
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, '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全选功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
