Vue自定义指令实现checkbox全选功能的方法
时间:2019-04-13
本文章向大家介绍Vue自定义指令实现checkbox全选功能的方法,主要包括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全选功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 解决python 虚拟环境删除包无法加载的问题
- Laravel框架路由管理简单示例
- php + WebUploader实现图片批量上传功能
- php查询内存信息操作示例
- ThinkPHP3.2框架操作Redis的方法分析
- python实现图像外边界跟踪操作
- php微信分享到朋友圈、QQ、朋友、微博
- Numpy 多维数据数组的实现
- 使用matplotlib的pyplot模块绘图的实现示例
- PHP get_html_translation_table()函数用法讲解
- Laravel中10个有用的用法小结
- PHP7 echo和print语句实例用法
- python上selenium的弹框操作实现
- php分享朋友圈的实现代码
- Laravel框架Request、Response及Session操作示例