vue利用element勾选框样式编写可勾选的卡片组件

需求：1、卡片点击查看详情，添加选中样式，兄弟标签取消样式；2、勾选框全选、反选，勾选样式，判断全选，未全选。

1.HTML 

1. 全选 

   <div class="select-contanier">
   <el-col
   v-if="showSubmits"
   :span="24"
   style="padding-right: 10px;
   display: flex;
   justify-content: space-between"
   >
   <el-button
     type="success"
     size="mini"
     @click="handleGetALL"
     :disabled="checkedList.length === 0"
   >
     全部提交
   </el-button>
   <el-checkbox
     style="margin-right: 15px"
     :value="checkAll"
     @change="checkAllChange"
     />
   </el-col>
   <div>

2. 卡片容器 

   <div class="card-contanier">
                           <div
                               v-for="(item,index) in cityOptions"
                               class="card-body"
                               :class="{bgclick: item.active || selectIndex === index}"
                               @click.prevent="cardClickList(item.myIndex)"
                           >
                               <div class="card-header">
   
                                   <div class="card-header--left"><span>{{ item.measureName }}</span>
                                       <el-divider
                                           direction="vertical"
                                       />
                                   </div>
                                   <div class="card-header--middle">
                                       第{{ item.periodNo }}期
                                   </div>
                                   <div class="card-header--right" @click.stop.prevent="checkOne(item, index)" >
                                       <el-checkbox :value="item.checked"/>
                                   </div>
                               </div>
                               <div class="card-content">
                                   <span>￥{{ item.measureTotalAmount }}</span>
                               </div>
                           </div>
                       </div>

   data(){
     return{
              // 接口数据
               measureTypeOptions: [],
               selectIndex: -1,
               checkAll: false,
              // 卡片数据
               cityOptions:[],
              // 已勾选数据存储
               checkedList: [],
      }
   }

    /** 获取数据 */
           getCurrMeasureList() {
               getMeasureList({
                   teamId: this.teamId,
                   projectId: this.projectId,
                   contractSectId: this.contractSectId,
               }).then(res => {
                   this.measureDtOptions = []
                   this.measureDtOptions = res.data
                   if (this.measureDtOptions.length > 0) {
                       this.measureDtOptions.forEach((x, index) => {
                           x.myIndex = index
                           x.active = false
                           x.checked = false
                       })
                   }
                   this.cityOptions = this.measureDtOptions
               })
           },
   /** 卡片详情点击事件 */
           cardClickList(index) {
               this.checkAll = false
               this.checkedList = []
               this.measureDtOptions.forEach(item => {
                   item.checked = false
                   item.active = false
               })
               // 卡片样式
               // this.measureDtOptions[index].active = true
               this.selectIndex = index
           },
           /** 全选*/
           checkAllChange() {
               this.checkAll = !this.checkAll
               if (this.checkAll) {
                   this.checkedList = []
                   this.measureDtOptions.forEach(item => {
                       item.checked = true
                       item.active = true
                       this.checkedList.push(item.id)
                   })
               } else {
                   this.checkedList = []
                   this.measureDtOptions.forEach(item => {
                       item.checked = false
                       item.active = false
                   })
               }
           },
           /** 单选 */
           checkOne(item, index) {
               if (this.checkedList.length > 0 && this.checkedList.includes(item.id)) {
                   this.checkedList.splice(this.checkedList.indexOf(item.id), 1)
                   this.measureDtOptions[index].checked = false
                   this.measureDtOptions[index].active = false
               } else {
                   this.checkedList.push(item.id)
                   this.measureDtOptions[index].checked = true
                   this.measureDtOptions[index].active = true
               }
               this.checkAll = this.checkedList.length === this.cityOptions.length
           }

    css

   .card-contanier{
           margin-top: 10px;
           margin-right: 10px;
           flex: 0 0 47vh;
           /*max-height:440px;*/
           scrollbar-width: none; /* firefox */
           -ms-overflow-style: none; /* IE 10+ */
           overflow-y: scroll;
       }
       .card-body{
           width: 100%;
           height:100px;
           border-radius:10px;
           border:1px solid #cccccc;
           margin-top: 10px;
           padding: 0 12px;
           .card-header{
               width: 100%;
               display: flex;
               height: 45%;
               align-items: center;
               border-bottom: 1px solid #cccccc;
               &--left{
                   flex: 10;
                   justify-content: space-between;
                   align-items: center;
                   display: inline-flex;
               }
               &--middle{
                   flex: 5;
                   text-align: center;
               }
               &--right{
                   flex: 1;z-index: 1100
               }
           }
           .card-content{
               width: 100%;
               height:55%;
               display: flex;
               align-items: center;
           }
       }
   .card-contanier::-webkit-scrollbar {
           display: none; /* Chrome Safari */
       }