vue Element UI使用事例(商品リスト)
38931 ワード
Goods.vue
<template>
<div id="goods">
<el-button type="text" @click="dialogVisible = true"> el-button>
<el-dialog
title=" "
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<div class="demo-input-suffix">
:
<el-input
placeholder=" "
v-model="goods_name">
el-input>
div>
<div class="demo-input-suffix">
:
<el-input
placeholder=" "
v-model="goods_num">
el-input>
div>
<div class="demo-input-suffix">
:
<el-input
placeholder=" "
v-model="goods_price">
el-input>
div>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel()"> el-button>
<el-button type="primary" @click="save()"> el-button>
span>
el-dialog>
<el-table
:data="goods_list"
border
style="width: 100%">
<el-table-column
type="index"
>
el-table-column>
<el-table-column
prop="name"
label=" "
width="180">
el-table-column>
<el-table-column
prop="price"
label=" "
width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.num" @change="issub(scope.$index)" size="mini" :min="0">el-input-number>
template>
el-table-column>
<el-table-column
prop="price"
label=" "
width="180">
el-table-column>
<el-table-column
label=" "
width="100">
<template slot-scope="scope">
<el-button @click="update(scope)" type="text" size="small"> el-button>
<el-button type="text" size="small" @click="del(scope.$index)"> el-button>
template>
el-table-column>
el-table>
<el-input v-model="total" style="width: 600px">
<template slot="prepend"> :template>
<template slot="append"> template>
el-input>
div>
template>
<script>
export default {
name: "Goods",
filters: {
format(money) {
return "¥" + money.toFixed(2);
}
},
data() {
return {
dialogVisible: false,
active: "zero_num",
goods_name: "",
goods_num: "",
goods_price: "",
goods_index: -1, // [-1 , 0 ]
goods_list: [
{"name": "python ", "num": 27, "price": 150},
{"name": "python ", "num": 21, "price": 100},
{"name": "python ", "num": 17, "price": 75},
{"name": "python ", "num": 37, "price": 60},
{"name": "python ", "num": 57, "price": 110},
]
}
},
methods: {
handleClose(done) {
this.$confirm(' ?')
.then(_ => {
done();
})
.catch(_ => {
});
},
issub(index) {
if (this.goods_list[index].num === 0) {
this.del(index)
}
},
save() {
// [ ]
if (this.goods_index == -1) {
this.goods_list.push({
"name": this.goods_name,
"num": parseInt(this.goods_num),
"price": parseFloat(this.goods_price),
});
} else {
this.goods_list[this.goods_index].name = this.goods_name;
this.goods_list[this.goods_index].num = parseInt(this.goods_num);
this.goods_list[this.goods_index].price = parseFloat(this.goods_price);
}
this.cancel();
},
cancel() {
this.dialogVisible = false;
this.goods_index = -1;
this.goods_name = "";
this.goods_num = "";
this.goods_price = "";
},
del(index) {
//
this.goods_list.splice(index, 1);
},
update(index) {
//
this.dialogVisible = true;
console.log(index);
this.goods_index = index.$index;
this.goods_name = index.row.name;
this.goods_num = index.row.num;
this.goods_price = index.row.price;
// ,
},
},
computed: {
total(){
let ret = 0;
this.goods_list.forEach(function (value, index) {
// console.log(value,index);
let sum_price = parseFloat(value.price) * parseFloat(value.num);
ret = ret + sum_price
});
return ret
}
}
}
script>
<style scoped>
#goods table {
width: 600px;
border: 1px solid #000;
border-collapse: collapse;
}
#goods td, #goods th {
border: 1px solid #000;
}
#goods .box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #eee;
width: 280px;
height: 160px;
padding: 40px 80px;
}
style>