vue使用监听实现全选反选功能

最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码

首先定义数据

rush:js;"> data: { /*全选、全不选*/ allCheck:false,//全选功能 //循环数据 checkArr:[ {cityName:"东城区",isCheck:false},{cityName:"西城区",{cityName:"朝阳区",{cityName:"丰台区",],}

然后是页面代码

rush:js;">
Box" v-model="carType.isCheck"/> {{carType.typeName}}

Box" id="chooseAllType" v-model="allCheck" @click="selectAll(allCheck)"/> 全选

下面是js中代码

rush:js;"> methods: { /*点击全选,选中所有复选框*/ selectAll: function (data) { var _this = this; //如果父级被选中,那么子集循环,全被给checked=true if (!data) { _this.checkArr.forEach(function (item) { item.isCheck = true; }); } else { //相反,如果没有被选中,子集应该全部checked=false _this.checkArr.forEach(function (item) { item.isCheck = false; }); } },}

下面是监听部分代码,主要功能为如果子集全部选中,全选按钮同样被勾选

rush:js;"> watch:{ /*监听全选事件*/ checkArr:{ handler(value){ var _this = this; var count=0; for(var i=0;i

总结

以上所述是小编给大家介绍的vue使用监听实现全选反选功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...