使用vue搭建一个可单选，全选，删除的购物车

使用vue写一个PC的购物车，有全选，店铺选择，单选，添加数量，删除等
以下为我实现的代码
贴图没有CSS
购物车列表由接口获取
效果图


代码实现

<template>
  <div>
    <div class="main">
      <div class="haed" style="text-align: left;">
      <div class="hdp">
        <input id="checkbox" type="checkbox" name="goodsAll" :value="cartListData" v-model="checkAll" @change="onCheckAllChange($event,cartListData)" class="styInput"/>全选
        </div>
            <div class="hxq">商品详情</div>
            <div class="hsl h">单价</div>
            <div class="hje ">数量</div>
            <div class="hzt h">金额</div>
            <div class="hcz h">状态</div>
            <div class="hcz h">操作</div>
      </div>
      <div class="content">
          <div class="csj"  v-for="(item,index) in cartListData" :key="index">
           <input id="checkbox" type="checkbox" name="shopRadio" :checked="checkedList" :value="item" :commodityId="item.commodityId"  @change="onChangeStore($event,item.commodityId,item)" class="styInput" /><span>产品ID：{
   {
   item.commodityId}}</span>
            <div class="mcentent" v-for="(man,key) in item.manCartCommodityList" :key="key">
                <div class="check">
                  <input :id="man.commodityId" type="checkbox" name="goodRadio" :value="man" :price ="man.manCommoditySku.discountPrice" :freight="man.manCommoditySku.freight" :dataId="man"  @change="onChangeMan($event,man)" class="styInput"/>
                  </div>
                <div class="mPhoto"><img src="@/assets/img/img.jpg" alt=""></div>
                <div class="mtext">
                    <div class="mtit">{
   {
   man.manCommodity.commodityName}}</div>
                    <div class="mcent">
                        <span>{
   {
   man.manCommodity.material}}</span>
                        <p>规格： {
   {
   man.manCommoditySku.specificationName}}</p>
                    </div>
                <div class="mimgtext">
                    <img class="cursor" src="@/assets/img/img.jpg" alt="">
                    <span>{
   {
   man.manCommoditySku.colorName}}</span>
                </div>
                </div>
                <div class="mdj m">￥{
   {
   man.manCommoditySku.sellingPrice}}.00元</div>
                <div class="msl">
                  <div @click="onChangeNumber(man)"><a-icon