vue 全选多选

html:

//全选按钮

<li class="choice_fme">

　　<div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>

</li>

//列表

<ul class="msge_list clearfix" v-for="(item,index) in messageItems" :key="index">

<li class="choice_fme">

　　<div v-bind:class='[!isCheck ? "not_pitch_on" : "pitch_on"]' @click="chooseOrder($event)"></div>

</li>

</ul>

//全选按钮

<li class="choice_fme_fast">

　　<div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>

</li>

 

js:

export default {

data(){

return{

　　messageItems:"",//获取到的数组

　　isCheck:false, //多选按钮

　　isCheckAll:false,//全选按钮

　　checkAllNum:0, //选中数量

}

},

methods:{

//多选

chooseOrder:function(e){

if (e.target.className.indexOf("pitch_on") == 0) {

　　e.target.className = "not_pitch_on" //未选中按钮样式

　　if( this.checkAllNum>0){

　　　　this.checkAllNum -=1

　　}

}else{

　　e.target.className = "pitch_on";//选中按钮样式

　　this.checkAllNum +=1;

}

if(this.checkAllNum == this.messageItems.length){

　　this.isCheckAll = true

　　this.isCheck = true

}else if(this.checkAllNum !== this.messageItems.length){

　　this.isCheckAll = false;

}

},

//全选

checkAll:function(){

　　if(this.isCheckAll==false){

　　　　this.checkAllNum = this.messageItems.length;

　　　　this.isCheckAll = true;

　　　　this.isCheck = true

　　}else if(this.isCheckAll==true){

　　　　this.isCheck = false

　　　　this.checkAllNum = 0

　　　　this.isCheckAll = false;

　　}

},

},

}

css:

.not_pitch_on{

background: url(../../../common/images/k-1.png) no-repeat;

}

.pitch_on{

background: url(../../../common/images/k-2.png) no-repeat !important;

}

转载于:https://www.cnblogs.com/lan-cheng/p/9241844.html