SOURCE

var vue = new Vue({
				el:"#app",
				data:{
					fruits:[
						{name:"苹果",size:"大",price:"12"},
						{name:"橘子",size:"中",price:"11"},
						{name:"香蕉",size:"小",price:"10"},
						{name:"梨",size:"中",price:"90"},
					],
					baskets:[
						
					],
					dialogVisible: false
				},
				methods:{
					//添加到购物车带参数fruit
					addToBasket(scope){
						let basket = {
							name:scope.name,
							size:scope.size,
							price:scope.price,
							quantity:1
						}
						if(this.baskets.length>0){
							let result =this.baskets.filter((basket) => {
								return basket.name === scope.name && basket.price === scope.price
							})
							if(result != null && result.length>0){
								result[0].quantity ++
							}else{
								this.baskets.push(basket)
							}
						}else{
							this.baskets.push(basket)
						}
            this.dialogVisible = false //不加这一行的时候 清空购物车后再添加会出来模态框，原因未知
					},
					//减按钮
					subQuantity(scope){
						scope.row.quantity --;
						if(scope.row.quantity<=0){
							this.baskets.splice(this.baskets.indexOf(scope.row),1)
						}
					},
					//加按钮
					addQuantity(scope){
						scope.row.quantity ++
					},
					handleClose() {
						this.dialogVisible = false
				   },
				   emptyBaskets(){
				   	this.baskets = []
				   }
				},
				computed:{
					//计算属性得出总价
					total(){
						let totalCost = 0
						for(var index in this.baskets){
							let single = this.baskets[index]
							totalCost += single.price * single.quantity
						}
						return totalCost
					}
				}
			})

<div id="app">
			<h3>水果</h3>
			<el-table :data="fruits" stripe style="width: 100%;">
				<el-table-column prop="name" label="名字" width="180" align=center></el-table-column>
				<el-table-column prop="size" label="size" width="180" align=center></el-table-column>
				<el-table-column prop="price" label="单价" width="180" align=center></el-table-column>
				<el-table-column label="操作" width="180" align=center>
					<template slot-scope="scope">
						<el-button @click="addToBasket(scope.row)" type="primary" icon="el-icon-plus" circle></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--购物车-->
			<div v-if="this.baskets.length>0">
				<h3>购物车</h3>
				<el-table :data="baskets" stripe style="width:100%">
					<el-table-column prop="name" label="名字" width="180" align=center></el-table-column>
					<el-table-column prop="size" label="size" width="180" align=center></el-table-column>
					<el-table-column prop="price" label="单价" width="180" align=center></el-table-column>
					<el-table-column label="操作" width="180" align=center>
						<template scope="scope">
							<el-button type="warning" @click="subQuantity(scope)" icon="el-icon-minus" circle size="mini"></el-button>
							<span>{{scope.row.quantity}}</span>
							<el-button type="success" @click="addQuantity(scope)" icon="el-icon-plus" circle size="mini"></el-button>
						</template>
					</el-table-column>
					<el-table-column label="价格" width="180" align=center>
						<template slot-scope="scope">
							<span>{{scope.row.quantity*scope.row.price}}</span>
						</template>
					</el-table-column>
				</el-table>
				<p>总价：{{total}}</p>
				<el-button-group>
					<el-button type="success">提交</el-button>
					<el-button type="danger" @click="dialogVisible = true">清空购物车</el-button>
				</el-button-group>
				<el-dialog title="确定清空购物车？" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
  					<span align=center>即将清空购物车</span>
  					<span slot="footer" class="dialog-footer">
	    				<el-button @click="dialogVisible = false">取 消</el-button>
	    				<el-button type="danger" @click="emptyBaskets">确 定</el-button>
  					</span>
				</el-dialog>

			</div>
			<div v-else>
				购物车空空如也
			</div>
			
		</div>