iView的table表格购物车的使用案例

ゝ一世哀愁。 2023-06-20 14:00 6阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDM4Nzkz_size_16_color_FFFFFF_t_70][]

在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>
    
    
    <style>
    .container {
      width: 1224px;
      margin:0 auto;
    }
    .footer{
      text-align:right;
      margin-bottom: 300px;
    }
    </style>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDM4Nzkz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191210164502178.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDM4Nzkz,size_16,color_FFFFFF,t_70