Vue自定义指令实现checkbox全选功能的方法
更新时间：2018年02月28日 10:54:12 作者：ClydeKuo
下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近做的一个项目需要用到Vue实现全选功能，参考了一下网上的做法，发现用属性计算的复用性不高，于是选用自定义指令，但网上的做法大多是会对原始数据有一定的格式要求，而且没有返回结果，于是做了改进。
上代码：
<!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全选功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
这篇文章主要介绍了vue 组件之间事件触发($emit)与event Bus($on)的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了Vue3中响应式的一些特殊处理，文中的示例代码讲解详细，对我们深入了解Vue3有一定的帮助，需要的可以参考一下2023-04-04
本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了element ui table 增加筛选的方法示例，详细的介绍了如何添加规则内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家介绍了Vue3中使用pnpm搭建monorepo开发环境示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了vue+iview动态渲染表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要介绍了vue el-upload 上传文件格式校验方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
unplugin-auto-import与unplugin-vue-components安装问题解析
这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家详细介绍了vue视频时间进度条组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue select二级联动第二级默认选中第一个option值的实例
下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
最新评论