在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自己安装或引入