SOURCE

console 命令行工具 X clear

                    
>
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 {}
}