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

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

1.HTML

全选

<div class="select-contanier">
<el-col
v-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 */}

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

自定义复选框,复选框样式修改,重写复选框
查了好多资料复选框写的磨磨叽叽的一大堆废话! 我来教大家写一个原生jq的复选框样式,简单实用,又不会耽误checkbox的调用. html: <label class="checkli ...
checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
html复选框代码隐藏勾勾,[译] 为什么 HTML 中复选框样式难写 — 本文给你答案
在当今世界,大多数网页开发者认为掌握 JavaScript 是优先选择,这理所当然,因为 JS 是浏览器脚本语言 .虽然 HTML 和 CSS 决定网站的样式,但是 JS 凭借它能调用 HTML 和 ...
css复选框样式_使用CSS样式复选框
css复选框样式 Introduction: 介绍: Sometimes we want to develop a website or web page that would contain a f ...
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
在reader中勾选pdf复选框_绝对可勾选的在WORD 2003中加入复选框的方法
绝对可勾选的在 word 2003 中加入复选框的方法方法一: 要在 word 2003 中加入复选框,最好是使用"控件工具箱"来完成. 具体方法是: 打开 Word ,依次点击 ...
element筛选 ajax,vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
##vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询基于element Transfer 直接上代码 XXXXX 编辑XXX 编辑XXXX style=" ...
java 复选框背景色_将多选框选中时打勾的颜色
body { font-size:12px; } .checkbox { width:12px; height:12px; background-image:url(http://ucren.com/ ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...

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

1.HTML

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

最新文章

热门文章