Vue3实现pc端商城购物车Demo

主要包含全选，店铺全选，反选，商品数量，价格计算
最终效果如下

数量加减使用的elementplus 中el-input-number组件

<template>
	<div>
		<div class="goodsCart">
			<div class="container">
				<div class="tit">
					全部商品
				</div>
				<div id="tree">
					<div class="tree">
						<div class="tree-title">
							<ul>
								<li class="width-6">
									<input type="checkbox" ref="businessInp" @click="selectAll" v-model="allDataCheck" />
									全部
								</li>
								<li class="width-48">商品信息</li>
								<li class="width-10">单价(元)</li>
								<li class="width-10">数量</li>
								<li class="width-16">金额</li>
								<li class="width-10">操作</li>
							</ul>
						</div>

						<div class="tree-merchant" v-for="(item, index) of data" :key="index">
							<div class="tree-merchant-name">
								<input type="checkbox" v-model="business" :value="item.id" @click="selectBusiness($event,item.id,item.goods)" />
								<div class="name">{
   {
   item.name}}</div>
							</div>

							<div class="tree-goods" v-for="(goods, indexs) of item.goods" :key="indexs">
								<ul>
									<li class="width-54">
										<input type="checkbox" v-model="goodsInp" :value="goods.id" @click="singleChoice($event,goods.id,item.goods,item.id)" />
										<img src="">
										<div class="goods-name">
											<div>{
   {
   goods.name}}</div>
											<div class="product-spec">
												<span>颜色:夏日琥珀</span><span>RAM容量:8GROM</span><span>容量:256G</span></div>
										</div>
									</li>
									<li class="width-10">
										<div class="price">
											¥{
   {
   goods.unitPrice}}
										</div>
							 	</li>
									<li class="width-10">
										<div class="num">
											<el-input-number size="mini" :min="1" v-model="goods.num"
												@change="handleChange" />
										</div>
									</li>
									<li class="width-16">
										<div class="price">
											¥{
   {
   goods.unitPrice*goods.num}}
										</div>