iView的table表格購物車的使用案例

在main.js中引入iview

import Vue from 'vue'
import App from './App'
import iView from 'iview'
import 'view-design/dist/styles/iview.css'

Vue.config.productionTip = false

Vue.use(iView);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue 文件裏面沒啥

<template>
  <div id="app">

    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloWorld.vue

<template>
  <div class="container">
    <h1>書城購物車數據</h1>
    <Table :columns="columns" :data="data1">
      <template slot-scope="{row}" slot="pic">
        <!--動態綁定數據-->
        <img :src="row.pic" alt="" width="80" height="100" >
      </template>
      <template slot-scope="{row}" slot="total">
        <span>{{computedTotal(row.price,row.count)}}</span>
      </template>
      <template slot-scope="{row,index}" slot="action">
        <Button type="error" @click="remove(index)">刪除</Button>
      </template>
    </Table>
    <div class="footer">
      <h1>總計：{{total}}</h1>
      <p>
        <Button type="success" @click="submit">微信支付</Button>
      </p>
    </div>

  </div>
</template>

<script>
import Bignumber from 'bignumber.js'

export default {
  name: 'HelloWorld',
  data () {
    return {
      columns: [
        {
          title:"序號",
          type:'index',
        },
        {
          title:"書名",
          key:"name",
        },
        {
          title:"圖片",
          slot:'pic',
        },
        {
          title:"單價",
          key:"price",
        },
        {
          title: "數量",
          key: "count",
          render: (h, params) => {
           return h('div',[
             h('InputNumber',{
               props:{
                max: 100,
                min: 0,
                value: params.row.count,
               },
               on:{
                 'on-change':(value) =>{
                   this.data1[params.index].count = value;
                 }
               }
             })
           ])
          }
        },
        {
          title:"出版日期",
          key:"beginDate"
        },
        {
          title:"商品總價",
          slot:'total'
        },
        {
          title:"操作",
          slot:'action'
        }
      ],
      data1:[
        {
          name: "《道君》",
          beginDate: "2018-3",
          pic:"https://img11.360buyimg.com/n1/jfs/t1/12113/13/2231/195028/5c19a659Ef2a5b8fa/4debfb11c4ee6f73.jpg",
          price: 185.00,
          count: 1
        },
        {
          name: "《慶餘年》",
          beginDate: "2019-11",
          pic:"https://img10.360buyimg.com/n1/s200x200_jfs/t1/39231/18/521/69777/5cb9a923Ee9bbee65/47fbdc80328fbb04.jpg",
          price: 259.45,
          count: 1
        },
        {
          name: "《魔教教主》",
          beginDate: "2018-10",
          pic:"https://img11.360buyimg.com/n1/s200x200_jfs/t2854/39/1257332007/79055/1d6cc177/57397338Nb236da2d.jpg",
          price: 39.12,
          count: 1
        },
        {
          name: "《Vue無價》",
          beginDate: "2019-12",
          price: 1.99,
          pic:"https://img13.360buyimg.com/n1/s200x200_jfs/t3526/184/1410319329/131957/7ba5b387/5825346fN1996cb8d.jpg",
          count: 2
        }
      ]
    }
  },
  methods:{
    computedTotal(price,count) {
      return new Bignumber(price).multipliedBy(count).toFixed(2);
    },
    remove(index) {
      this.$Modal.confirm({
        title:"提示",
        content:'確認刪除這條數據嗎？',
        onOk: () =>{
          this.data1.splice(index,1);
          //this.$Message.info('Clicked ok');
        },
        onCancel:() =>{
          //this.$Message.info('Clicked cancel');
        }
      });
    },
    submit() {
      const req=this.data1.map(item => ({id:item.id,count:item.count}));
      console.log(req);
    }
  },
  computed:{
    total() {
      const num = this.data1.reduce((a,b) =>{
        return new Bignumber(a).plus(new Bignumber(b.count).multipliedBy(b.price));
      },0)
      return new Bignumber(num).toFixed(2);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.container {
  width: 1224px;
  margin:0 auto;
}
.footer{
  text-align:right;
  margin-bottom: 300px;
}
</style>

用到的iview和bignumber.js自己安裝或引入