Vue项目实战：购物车页面实现与ElementUI集成

目录

1. 购物车页面

• Order-Header组件
• 购物车列表渲染
• 购物车全选和非全选
• 购物车商品更新和删除
• 购物车结算

2. ElementUI集成

3. Babel介绍

购物车页面

（1）Order-Header组件

• 在Order-Header.vue中：

<template>
    <div class="order-header">
        <div class="container clearfix">
            <div class="header-logo">
                <a href="/#/index"></a>
            </div>
            <div class="title">
                <h2>{
  {title}}<slot name="tip"></slot></h2>
            </div>
            <div class="username">
                <a href="javascript:;">{
  {username}}</a>
            </div>
        </div>
    </div>
</template>
<script>
import {
    mapState} from 'vuex'
export default {
    
    name:'order-header',
    props: {
    
        title:String, 
    },
    computed: {
    
        ...mapState(['username'])
    }
}
</script>
<!--省略样式-->

• 在使用该样式的文件中：

        <order-header title="我的购物车">
            <template v-slot:tip>
                <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算。</span>
            </template>    
        </order-header> 

（2）购物车列表渲染

在cart.vue中：

        <div class="cart-box">       
          <ul class="cart-item-head">
            <li class="col-1"><span class="checkbox" v-bind:class="{
    'checked':allChecked}"></span>全选</li>
            <li class="col-3">商品 名称</li>
            <li class="col-1">单价</li>
            <li class="col-2">数量</li>
            <li class="col-1">小计</li>
            <li class="col-1">操作</li>
          </ul>
            
          <ul class="cart-item-list">
            <li class="cart-item" v-for="(item,index) in list" v-bind:key="index">
              <div class="item-check">