丑陋的界面 而且el-col还是没弄懂，样式都加不上 记录一下

支持按店铺分类，以及删除操作(这里应该考虑的挺细的了)

<template>
<!-- ;backgound-color:#fcfcfc  想加这个样式但死活加不上 -->
  <div>
        <!-- 顶部 -->
        <el-row>
            <el-col :span="3">
                <el-checkbox 
                    v-model="selectAllGoods"  
                    @change="handleSelectAll($event)" 
                    class="checkSelectAll"
                >
                    全选
                </el-checkbox>
            </el-col>
            <el-col :span="3">
                商品信息
            </el-col>
            <el-col :span="3" :offset="6">
                单价
            </el-col>
            <el-col :span="3">
                数量
            </el-col>
            <el-col :span="3">
                金额
            </el-col>
            <el-col :span="3">
                操作
            </el-col>
        </el-row>
        <!-- 购物车列表 -->
        <el-row>
            <div v-for="(shop,shopIndex) in cartData" :key="shop.shopId">
                <el-checkbox 
                    v-model="shop.selectAllGoodsInShop" 
                    @change="handleSelectShop($event,shopIndex)" 
                    class="selectAllGoodsInShop"
                    style="margin-bottom:10px;"
                >
                    <el-link class="shop-name-link" :underline="false">{{shop.shopName}}</el-link>
                </el-checkbox>
                <el-checkbox-group v-model="shop.selectedlist" class="selected-goods">
                    <div v-for="(goods,goodsIndex) in shop.goodsList" :key="goods.goodsId" style="border:1px solid #cccccc">
                         <!--  -->
                         <el-row>
                             <el-col :span="1">
                                <el-checkbox 
                                    @change="checkSelectAllGoodsInShop(shopIndex)"  
                                    :label="goods"
                                    :key="goods.goodsId"
                                    class="goods-checkbox"
                                    size="medium"
                                >
                                    <br/>
                                </el-checkbox>
                            </el-col>
                            <el-col :span="1" >
                                <el-image :src="goods.goodsPicUrl" style="height:40px;width:30px"/>
                            </el-col>
                            <el-col :span="3">
                                <el-link :underline="false" style="font-size:10px">{{goods.goodsName}}</el-link>
                            </el-col>
                            <el-col :span="3" :offset="7">
                                <el-link disabled style="color:black"><strong>￥{{goods.unitPrice}}</strong></el-link>
                            </el-col>
                            <el-col :span="2">
                                <el-input-number size="mini" style="width:100%"  v-model="goods.goodsPurchaseNum" @change="handleCounterChange" :min="minSelectedNum" :max="goods.goodsPurchaseRestriction"></el-input-number>
                            </el-col>
                            <el-col :span="3">
                                <el-link disabled style="color:black;text-align:center;margin-right:46px">{{NumberMul(goods.unitPrice,goods.goodsPurchaseNum)}}</el-link>
                            </el-col>
                            <el-col :span="3">
                                <el-button type="text" @click="openDeleteConfirm(goods.goodsId,shopIndex,goodsIndex)" class="options-delete-btn">删除</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-checkbox-group>
            </div>
        </el-row>
  </div>
</template>

<script>

 export default {
    data() {
      return {
		  selectedNum:0,
		  selectAllGoods:false,//大全选
		  cartData:[
		    {
                shopId:"1",
                shopName:"北京华章图书旗舰",
                selectedlist: [],//存放选中的id
                selectAllGoodsInShop:false,//小全选
                goodsList: [{
                    goodsId: "1",
                    goodsName: "229677|正版(特价书)现货java并发编程的艺术",
                    unitPrice:"28.32",
                    goodsPurchaseNum:5,
                    goodsPurchaseRestriction:9,
                    goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg",
                },{
                    goodsId: "2",
                    goodsName: "碧浪洗衣液700g瓶装抑菌除菌去渍日晒清新手洗机洗家用家庭装正品",
                    unitPrice:"28333.30",
                    goodsPurchaseNum:5,
                    goodsPurchaseRestriction:9,
                    goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg",
                }],
		    },
		    {
		        shopId:"2",
                shopName:"雅冠家居专营店",
                selectedlist: [],//存放选中的商品
		        selectAllGoodsInShop:false,//小全选
                goodsList: [{
                    goodsId: "3",
                    goodsName: "【年货价】KeychronK7蓝牙无线机械键盘矮轴超薄68小型便携适配",
                    unitPrice:"28.30",
                    goodsPurchaseNum:5,
                    goodsPurchaseRestriction:1,
                    goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg",
                },{
                    goodsId: "4",
                    goodsName: "【年货价】雷亚游戏官方正版周边授权销售 Rayark Cytus II 手机平板",
                    unitPrice:"28.30",
                    goodsPurchaseNum:5,
                    goodsPurchaseRestriction:6,
                    goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg",
                }],
		    },
		  ],
          minSelectedNum:1
	  }
	},
    methods: {
        handleSelectAll(event){ //大全选
            this.cartData.forEach((goods,index)=>{
                this.handleSelectShop(event,index)
                if(event == true){
                    this.cartData[index].selectAllGoodsInShop = true
                }else{
                    this.cartData[index].selectAllGoodsInShop = false
                }
            })
            this.checkSelectAll()
        },
        handleSelectShop(event,index){ //小全选
            let shop=this.cartData[index];
            shop.selectedlist = []
            if(event == true){
                shop.goodsList.forEach((goods)=>{
                    shop.selectedlist.push(goods)
            })}
            this.checkSelectAll()
        },
        
        checkSelectAllGoodsInShop(index){ //每一项的选中
            let shop=this.cartData[index];
            let selectedlist=shop.selectedlist;
            let goodsList=shop.goodsList;
            if( selectedlist.length == goodsList.length){
                this.cartData[index].selectAllGoodsInShop = true
            }else{
                this.cartData[index].selectAllGoodsInShop = false
            }
            this.checkSelectAll()
        },
        checkSelectAll(){ //检查大全选是否需要选中
            this.selectedNum = 0
            let checkSelectAllList = []
            this.cartData.find((shop)=>{
                if(shop.selectAllGoodsInShop == false){ //如果找出小全选中有false的即代表大全选不能选中
                    checkSelectAllList.push(shop)
                }
                this.selectedNum += shop.selectedlist.length
            })
            if(checkSelectAllList.length>0){
                this.selectAllGoods = false
            }else{
                this.selectAllGoods = true
            }
        },
        handleCounterChange(value){
            
        },
        openDeleteConfirm(goodsId,shopIndex,goodsIndex){
           this.$confirm('确定移除该商品吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                let shop=this.cartData[shopIndex];
                let deletedGoods=shop.goodsList[goodsIndex];
                let deletedGoodsId=deletedGoods.goodsId;
                shop.goodsList.splice(goodsIndex,1);
                let deletedIndexInSelectedList=-1;
                shop.selectedlist.forEach((goods,index)=>{
                    if(goods.goodsId==deletedGoodsId){
                        deletedIndexInSelectedList=index;
                    }
                })
                if(deletedIndexInSelectedList!=-1){
                    shop.selectedlist.splice(deletedIndexInSelectedList,1)
                }
                if(shop.goodsList.length==0){
                    this.cartData.splice(shopIndex,1)
                    this.checkSelectAll()
                    this.checkSelectAllGoodsInShop(shopIndex)
                }else{
                    if(shop.goodsList.length==shop.selectedlist.length){
                        shop.selectAllGoodsInShop=true;
                        this.checkSelectAll()
                    }
                }
                }).catch(() => {})
        }
    },
    computed:{
        goodsPrice(unitPrice,purchaseNum){
            return (unitPrice,purchaseNum)=>{
                return parseInt(unitPrice,10)*parseInt(purchaseNum,10);
            }
        },
    },
    filter:{
        floatFilter(value){
            let realVal = parseFloat(value).toFixed(2)
            return realVal
        }
    }
}
</script>

<style lang="less" scoped>
    .shop-name-link{
        color: #3d4542;
    }
    .shop-name-link:hover{
        color: #f34733;
    }
    .selected-goods a{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //多行在这里修改数字即可
        overflow:hidden;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
    }
     .options-delete-btn{
        color: #3d4542;
    }
    .options-delete-btn:hover{
        color: #f34733;
    }
</style>

看了别人的博客 拿来用的js浮点数乘法

Vue.prototype.NumberMul = function(arg1, arg2) {
    var m = 0;
    var s1 = arg1.toString();
    var s2 = arg2.toString();
    try {
        m += s1.split(".")[1].length;
    } catch (e) {}
    try {
        m += s2.split(".")[1].length;
    } catch (e) {}
    return (Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)).toFixed(2);//两位小数
}