下面我就为大家分享一篇vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。
最近做的一个项目需要用到Vue实现全选功能，参考了一下网上的做法，发现用属性计算的复用性不高，于是选用自定义指令，但网上的做法大多是会对原始数据有一定的格式要求，而且没有返回结果，于是做了改进。
上代码：
nbsp;html>全选
登录后复制 {{item.demo}}
customerResult: {{customerResult}}
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() }, }, } })
通常我们都要获取原始数据中的某个键值，可在“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次。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
p5.js入门教程之鼠标交互的示例
Vue 实现双向绑定的四种方法
Vue-路由导航菜单栏的高亮设置方法
以上就是在Vue中如何操作自定义指令实现checkbox全选功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2750370.html
