vue+element-ui中checkbox多选框功能的实现

工作中遇到这样一个问题，需要一个隐藏的多选框，鼠标移入之后才会显示出未选择状态，当点击选择，就会显示出也选择状态，且不会再隐藏，记录记录。
首先
中间是绑定的数据循环

<div class="hk-recruit-apply">
  <div class="hk-recruit-title">
    <span class="font-16 text-blacks hk-recruit-title-bar padding-r-25">相似职位</span>
    <el-checkbox class="hk-checkbox-all"
      v-model="ischackbox" @change="onCheckboxChange" >全选</el-checkbox>
    <el-button type="text" class="margin-l-10">一键申请</el-button>
  </div>
  <ul class="hk-recruit-table-box" v-for="(item, index) in postTable" :key="index"
   :class="selectArr == true ? 'is-active' : ''">
    <li>
      <span class="font-14 text-blacks">{{item.postname}}</span>
      <span class="font-14 padding-l-10 text-blacks">({{item.goodstaff}})</span>
    </li>
    <li class="padding-t-9 padding-b-11">
      <span class="text-red font-12">{{item.salarys}}</span>
    </li>
    <li>
      <span class="font-12 text-line">{{item.name}}{{item.id}}</span>
      <span class="padding-l-20 font-12 text-blacks">{{item.address}}</span>
    </li>
    <li class="hk-checked-btn">
      <!-- <Checkbox v-model="selectArrCloth" label="adfs">dsacsd</Checkbox> -->
      <el-checkbox-button
        v-model="selectArrCloth" :label="item.id"
        @change="item.checked = item.checked">
        <i class="hk-checked-btn-icon iconfont icon-duigou"></i>
      </el-checkbox-button>
    </li>
  </ul>
</div>

css样式如下

.hk-recruit-apply {
  .hk-recruit-title {
           padding: 12px 22px;
           border-bottom: 1px solid #EEEEEE;
           .hk-recruit-title-bar {
               font-family:Microsoft YaHei;
               font-weight:bold;
               color:rgba(51,51,51,1);
           }
           .hk-checkbox-bat {
               display: inline-block;
           }
       }
       .hk-recruit-table-box {
           padding: 12px 22px;
           border-bottom: 1px solid #EEEEEE;
           position: relative;
           .hk-checked-btn {
               position: absolute;
               visibility: hidden;
               bottom: 0px;
               right: 5px;
               z-index: 9;
               // 新的方法
               // 选择时
               .el-checkbox-button {
                   .el-checkbox-button__inner {
                       display: inline-block;
                       border-color: transparent;
                       padding: 0;
                       border-bottom: 21px solid #D6D6D6;
                       border-left: 30px solid transparent;
                       .hk-checked-btn-icon {
                           color: #fff;
                           // color: #000;
                           position: absolute;
                           top: 4px;
                           left: -18px;
                       }
                   }
                   &:last-child {
                       .el-checkbox-button__inner {
                           border-radius: 0;
                       }
                   }
                   &.is-checked {
                       .el-checkbox-button__inner {
                           border-bottom: 21px solid #FF853E;
                           border-left: 30px solid transparent;
                       }
                   }
               }
               .el-checkbox-button__inner {
                   background: transparent;
                   // padding: 2px;
               }
               .el-checkbox-button.is-checked:first-child {
                   .el-checkbox-button__inner {
                       border-left-color: transparent;
                   }
               }
               .hk-checked-btn-icon {
                   color: #fff;
               }
           }
           &:hover {
               .hk-checked-btn {
                   visibility: visible;
               }
           }
           &.is-active {
               .hk-checked-btn {
                   visibility: visible;
                   .el-checkbox-button {
                       // visibility: hidden;
                       .el-checkbox-button__inner {
                           display: inline-block;
                           border-color: transparent;
                           padding: 0;
                           border-bottom: 21px solid #D6D6D6;
                           border-left: 30px solid transparent;
                           .hk-checked-btn-icon {
                               color: #fff;
                               // color: #000;
                               position: absolute;
                               top: 4px;
                               left: -18px;
                           }
                       }
                       &:last-child {
                           .el-checkbox-button__inner {
                               border-radius: 0;
                           }
                       }
                       &.is-checked {
                           .el-checkbox-button__inner {
                               border-bottom: 21px solid #FF853E;
                               border-left: 30px solid transparent;
                           }
                       }
                   }
               }
           }
       }
   }

我们需要在data初始化

data () {
	ruturn {
		selectArr: false,
	    postTable: [],
	    ischackbox: false,
	    selectArrCloth: [],
	}
}

在methods中我们需要获取后台请求来得数据
并循环数据

// 请求数据
    getTuijian () {
    // 这里假设res.data是循环来的数据 注：res.data是数组
      var arr = res.data
      arr.forEach(item => {
        item.checkbed = false
      })
      this.postTable = arr
    },
    // 全选事件
    onCheckboxChange (val) {
      console.log(val)
      if (val) {
        let selectArrCloth = []
        this.postTable.forEach(item => {
          selectArrCloth.push(item.id)
        })
        this.selectArrCloth = selectArrCloth
      } else {
        this.selectArrCloth = []
      }
    }

需要在wach中监听selectArrCloth

watch: {
    selectArrCloth () {
      if (this.selectArrCloth.length == this.postTable.length) {
        this.ischackbox = true
      } else {
        this.ischackbox = false
      }
      let selectArr = 0
      if (this.selectArrCloth.length > 0) {
        for (let item in this.selectArrCloth) {
          selectArr = item
        }
        this.selectArr = true
      } else {
        this.selectArr = false
      }
    }
  }

效果图如下

加油