vue2.0 实现全选和全不选

<h3 id="实现思路">实现思路：

1、 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为true的input的value值存入数组checkModel里

2 、watch函数来监听checkModel 属性，当其长度==input元素时 全选按钮选中 否则取消

3 、全选按钮v-model checked 属性来显示当前选中状态 click事件里 当checked为true时 全选 所有input按钮被选中也就是checkModel的遍历存入其value值

　　全选


　　
{{item.name}}--
　　　　{{item.age}}--
　　　　{{item.money}}元
　　　　
　　

data(){
　　return {
　　　　list:[
　　　　　　{id:1,name:"明明",age:23,money:100},　　　　　　{id:2,name:"红红",age:18,money:200},　　　　　　{id:3,name:"强强",age:29,money:300}
　　　　],　　　　checked:false,//是否全选
　　　　checkModel:[] //双向数据绑定的数组，我是用的id
　　}
},watch:{
　　checkModel(){
　　　　if(this.checkModel.length==this.list.length){
　　　　　　this.checked=true;
　　　　}else{
　　　　　　this.checked=false;
　　　　}
　　}
},methods:{　　
　　checkAll(){
　　　　if(this.checked){
　　　　　　this.checkModel=[];
　　　　}else{
　　　　　　this.list.forEach((item)=>{
　　　　　　if(this.checkModel.indexOf(item.id)==-1){
　　　　　　　　this.checkModel.push(item.id)
　　　　　　}
　　　　　　})
　　　　}
　　}
}

注：删除效果我用的是element-ui，有兴趣的朋友可以研究下

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!