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

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

1.HTML

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

卡片容器

<div class="card-contanier"><divv-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-dividerdirection="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.dataif (this.measureDtOptions.length > 0) {this.measureDtOptions.forEach((x, index) => {x.myIndex = indexx.active = falsex.checked = false})}this.cityOptions = this.measureDtOptions})},/** 卡片详情点击事件 */cardClickList(index) {this.checkAll = falsethis.checkedList = []this.measureDtOptions.forEach(item => {item.checked = falseitem.active = false})// 卡片样式// this.measureDtOptions[index].active = truethis.selectIndex = index},/** 全选*/checkAllChange() {this.checkAll = !this.checkAllif (this.checkAll) {this.checkedList = []this.measureDtOptions.forEach(item => {item.checked = trueitem.active = truethis.checkedList.push(item.id)})} else {this.checkedList = []this.measureDtOptions.forEach(item => {item.checked = falseitem.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 = falsethis.measureDtOptions[index].active = false} else {this.checkedList.push(item.id)this.measureDtOptions[index].checked = truethis.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 */}