符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要介绍Vue自定义指令如何实现checkbox全选功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
专注于为中小企业提供成都网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业商都免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
代码:
全选
- {{item.demo}}
customerResult: {{customerResult}}
通常我们都要获取原始数据中的某个键值,可在“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全选功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!