console
new Vue({
el: '#app',
data: {
isSelectAll: false,
list: [{
checked: false,
title: '脉动',
desc: '柠檬味',
quantity: 1
},
{
checked: false,
title: '脉动',
desc: '菠萝味',
quantity: 1
},
{
checked: false,
title: '脉动',
desc: '荔枝味',
quantity: 1
}]
},
methods: {
selectAll(event) {
this.list.forEach(item => item.checked = event.target.checked)
},
itemCheckChange(event) {
this.isSelectAll = this.list.every(item => item.checked === true)
},
changeQuantity(index, val) {
this.list[index].quantity += val
}
}
})
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
<script src="http://cdn.bootcss.com/vue/2.5.16/vue.min.js">
</script>
<script src="https://unpkg.com/element-ui@1.4/lib/index.js">
</script>
<!-- 代码开始 -->
<div id="app">
<div>
<el-checkbox v-model="isSelectAll" @change="selectAll">
选中全部数据
</el-checkbox>
</div>
<div class="left-panel">
<div v-for="(item,index) in list" class="item">
<label class="item-content">
<el-checkbox v-model="item.checked" @change="itemCheckChange">
</el-checkbox>
<div class="item-title">
{{item.title}}
<br />
{{item.desc}}
</div>
<div class="count-btn">
<el-button size="mini" @click.capture.stop.prevent="changeQuantity(index,1)">
+
</el-button>
<span>
{{item.quantity}}
</span>
<el-button size="mini" @click.capture.stop.prevent="changeQuantity(index,-1)">
-
</el-button>
</div>
</label>
</div>
</div>
</div>
.left-panel {
width: 200px;
display: flex;
flex-direction: column;
.item {
cursor: pointer;
background-color: white;
padding: 20px;
}
.item + .item {
margin-top: 20px;
}
.item-content {
display: flex;
flex-direction: row;
.item-title {
flex: 1;
}
}
.count-btn {}
}