用vue做仿淘宝购物车，el-checkbox循环问题，求大神帮忙！

Question

用vue做仿淘宝购物车，但是中间的组件循环出现的时候把el-checkbox也给循环了，导致点击checkbox就牵连到了下面的checkbox，这个时候该怎么办？贴代码：

<template>
  <div class="icon">
    <div>
      <el-row class="icon-one">
        <el-col :span='2'><i @click="goback" class="icon iconfont icon-back"></i></el-col>
        <el-col :span='22'>
          <span class="el-dropdown-link">购物车<span>(1)</span></span>
        </el-col>
      </el-row>
    </div>
    <div class="icon-two">
      <el-checkbox-group>
        <el-row style="padding: 20px;padding-bottom: 0px" v-for="(carts,index) in cart" :key="index">
          <el-col>
            <el-card shadow="always">
              <el-row class="el-row-one">
                <el-col :span='4'>店铺</el-col>
                <el-col :span='16'>morem</el-col>
                <el-col :span='4'>客服</el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-col :span="1" >
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-row>
                    <el-col :span='5' class="lazy">
                      <img
                        src="//gw1.alicdn.com/bao/uploaded/i3/36950449/TB2nty5fyOYBuNjSsD4XXbSkFXa_!!36950449.jpg_90x90.jpg"
                        width="100%;">
                    </el-col>
                    <el-col :span='13' style="font-size: 15px">
                      <p>{{carts.commodityName}}</p>
                      <p style="font-size: 14px;color: #b3b3b3">价格：{{carts.commodityPrice}}</p>
                      <p>共<span>{{carts.commodityNumber}}</span>件</p>
                      <p style="font-size: 14px;color: #ff8a19">{{carts.commoditySpecificationInventoryPriceEntity.specification1}}</p>
                    </el-col>
                    <el-col :span='2' class="zuoce">
                      <el-input-number v-model="carts.commodityNumber"  size="small" controls-position="right" @change="handleChange" :min="1" @click="zuida"></el-input-number>
                      <el-button>删 除</el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-checkbox-group>
    </div>
    <div class="el-footer">
      <el-row>
        <el-col :span='3'>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <!--<el-checkbox ":indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange>全选</el-checkbox>-->
        </el-col>
        <el-col :span='15'>
          合计:<span style="color: orangered;font-size: 16px">￥19.90</span>
        </el-col>
        <router-link to="/MyCart">
          <el-col :span='5'>
            <el-button>立即购买</el-button>
          </el-col>
        </router-link>
      </el-row>
    </div>
  </div>
</template>
<script>
  /* eslint-disable no-cond-assign,no-undef,no-unused-vars */

  import ElCol from 'element-ui/packages/col/src/col';
  import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue';
  import axios from 'axios';
  import ElCheckbox from '../../../node_modules/element-ui/packages/checkbox/src/checkbox.vue';
  import ElRow from 'element-ui/packages/row/src/row';

  const cityOptions = ['1', '2'];
  export default {
    components: {
      ElRow,
      ElCheckbox,
      ElButton,
      ElCol},
      axios,
    name: 'fourPage',
    data() {
      return {
        cart: [],
        userId: 1,
        checkAll: false,
        checkedCities: [''],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    mounted() {
      this.getjson();
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      goback() {
        this.$router.go(-1);// 1:前进 ,-1:后退
      },
      handleChange(value) {
        console.log(value);
      },
      getjson() {
        axios.get('http://39.107.252.226:8808/queryShoppingCart', {params: {userId: this.userId}})
          .then(this.succ);
      },
      succ(res) {
        console.log(res);
        this.cart = res.data.foods;
        console.log(this.cart);
      },
    zuida() {
// eslint-disable-next-line no-constant-condition
        if (commodityNumber = 7) {
          this.$message({
            message: '已达库存最高数量'
          });
        }
      }
    }
  };
</script>
<style scoped>
  .icon-one {
    width: 100%;
    height: 47px;
    line-height: 47px;
    text-align: center;
    background-color: #FAFAFA;
  }

  span {
    font-size: 16px;
  }

  .el-footer {
    margin-right: 10px;
    bottom: 0;
    width: 100%;
    height: 50px;
    color: black;
    line-height: 50px;
    z-index: 400000;
    position: fixed;
    margin-top: 40px;
    background-color: #fbfbfb;
    text-align: right;
  }
p{
  padding: 0px;
  margin: 0px;
}
  .el-footer .el-button {
    background-color: #ff2315;
    color: white;
    margin-left: 12px;
    border-radius: 0px;
  }

  .el-input-number--small {
    width: 84px;
    line-height: 30px;
  }

  .el-input-number{
    margin-top: 25px;
  }

  .zuoce .el-button{
    margin-top: 10px;
    height: 20px;
    line-height: 0px;
  }
</style>