用vue和iview做了一个购物车小页面

<template>

  <div id="app">

    <div class="container">

      <h1>购物车</h1>

      <Table border :columns="columns1" :data="data1">

        <template slot-scope="{ row }" slot="pic">

          <!-- <strong>{{ row.name }}</strong> -->

          <img :src="row.pic" alt="" />

        </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>

  </div>

</template>

<script>

import bignumber from 'bignumber.js'

export default {

  name: 'App',

  data() {

    return {

      columns1: [

        {

          title: '序号',

          key: 'name',

          type: 'index',

        },

        {

          title: '图片',

          key: 'pic',

          slot: 'pic',

        },

        {

          title: '单价',

          key: 'price',

        },

        {

          title: '商品总价',

          slot: 'total',

        },

        {

          title: '数量',

          key: 'count',

          render: (h, params) => {

            return h('div', [

              h('Input-number', {

                props: {

                  max: 100,

                  min: 0,

                  step: 1,

                  value: params.row.count,

                },

                on: {

                  'on-change': (value) => {

                    this.data1[params.index].count = value

                  },

                },

              }),

            ])

          },

        },

        {

          title: '操作',

          key: '',

          slot: 'action',

        },

      ],

      data1: [

        {

          id: '0',

          name: '王小明',

          pic: './assets/j1.jpg',

          price: '34.63',

          count: 2,

        },

        {

          id: '1',

          name: '张小刚',

          pic: './assets/j1.jpg',

          price: '34.63',

          count: 0,

        },

        {

          id: '2',

          name: '李小红',

          pic: './assets/j1.jpg',

          price: '34.63',

          count: 0,

        },

        {

          id: '3',

          name: '周小伟',

          pic: './assets/j1.jpg',

          price: '34.63',

          count: 0,

        },

      ],

    }

  },

  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)

        },

        onCancel: () => {

          this.$Message.info('已取消')

        },

      })

    },

    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>

<style>

#app {

  margin-top: 60px;

}

.container {

  width: 1224px;

  margin: 0 auto;

}

img {

  width: 30px;

  height: 20px;

}

.footer {

  right: 0;

}

</style>