zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    计算机网络 基础 1
    JAVA 基础之 多线程
    HashMap 多线程处理之 FailFast机制:
    Struts2
    JAVA 由浅及深之 Servlet
    Servlet 会话技术 , Session 及 Cookie 详解
    JAVA 设计模式 : 单例模式
    JAVA 基础之 序列化 Serializable
    代理模式 及 实现AOP 拦截机制
    web.xml 文件详解 及 listener、 filter、servlet 加载顺序
  • 原文地址:https://www.cnblogs.com/lan-cheng/p/9241844.html
Copyright © 2011-2022 走看看