Vue购物车详情页

本篇介绍Vue购物车详情页

template部分代码实现:

<template>
  <div class="content shopCart">
    <!-- <div class="breadcrumb">
      <el-breadcrumb>
        <el-breadcrumb-item>
            <router-link :to="{name:'food'}">
            菜品
            </router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>购物车</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <div class="table">
      <el-table  :data="tableData" ref="multipleTable" style="width: 100%"
        @selection-change="handleSelectionChange" :close-on-click-modal="false" :close-on-press-escape="false"
        :header-cell-style="{background:'#f8f8f8',color:'#999'}">
        <el-table-column type="selection" width="75" align="center" />
        <el-table-column prop="shopImg" align="center" width="150" label="商品">
          <template slot-scope="scope">
            <img :src="scope.row.shopImg" class="shopImg" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="shop" align="center">
          <template slot-scope="scope">
            <span class="shop">{
  {scope.row.shop}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" align="center">
          <template slot-scope="scope">
            <span class="price">¥{
  {scope.row.price}}</span>
          </template>
        </el-table-column&