码迷,mamicode.com
首页 > 其他好文 > 详细

vue实现全选,反选

时间:2017-12-19 12:33:46      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:名称   单选   length   table   filter   comm   example   als   post   

1.example.vue

<template>
<table class="table-common">
<tr>
<th class="th1"><label for="selectAll"><input type="checkbox" v-model=‘checkAll‘ @click=‘checkedAll()‘ name="" id="selectAll" value="" />全选</label></th>
<th class="th2">维度名称</th>
<th class="th3">维度说明</th>
</tr>
<tr v-for="item in checkData">
<td ><input type="checkbox" name="" value="" v-model=‘item.isCheck‘ @change="singleSelect()"/></td>
<td class="right">item.text</td>
</tr>
</table>

</template>
<script>
  export default {
        name: ‘design‘,
        data() {
        	return{
        		checkAll:false,
        		checkData:[
				{text:‘haha‘,isCheck:false},
				{text:‘hehe‘,isCheck:false},
				{text:‘xixi‘,isCheck:false}
				]	
        	}
        },
        methods:{
        	//全选
        	 checkedAll() {
        	    for(var item=0;item<=this.checkData.length;item++){
        	 	this.checkData[item].isCheck = !this.checkAll;
        	     }
                 },
              //单选
	      singleSelect(){
		var selectData=this.checkData.filter(function(item){
			return item.isCheck==true;
		})
		selectData.length==this.checkData.length? this.checkAll=true:this.checkAll=false;
		},
			    
        }
   }
</script>                        

  

 

vue实现全选,反选

标签:名称   单选   length   table   filter   comm   example   als   post   

原文地址:http://www.cnblogs.com/xuxiaoxia/p/8063887.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!