Vue+Element+computed实现购物车
作者：互联网
本人写的小程序，功能还在完善中，欢迎扫一扫提出宝贵意见！
该购物车效果采用的是Element-ui库实现的。
采用了computed计算属性来实现逻辑操作。
功能分析：
- 全选/全不选/单选。
- 数量增加、数量减少。
- 总金额=数量*单价。
- 商品总价：每一项的总金额相加。
- 商品总数：每一项的数量相加。
- 删除功能。
废话不多说，复制粘贴看效果：
1 <template>
2 <div class="cart">
3 <div class="group_btn">
4 <el-button type="success" @click="addDialog">添加</el-button>
5 </div>
6 <el-table
7 :data="tableData"
8 border
9 style="width: 100%"
10 @selection-change="handleSelectionChange"
11 >
12 <el-table-column type="selection" width="55" align="center"></el-table-column>
13 <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
14 <el-table-column prop="name" label="类目" width="180" align="center"></el-table-column>
15 <el-table-column prop="price" label="价格" align="center"></el-table-column>
16 <el-table-column label="数量" align="center">
17 <template slot-scope="scope">
18 <el-input-number v-model="scope.row.number" :min="1" :max="10" label="描述文字"></el-input-number>
19 </template>
20 </el-table-column>
21 <el-table-column label="操作" align="center">
22 <template slot-scope="scope">
23 <el-button size="mini" @click="editDialog(scope.$index, scope.row)">编辑</el-button>
24 <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
25 </template>
26 </el-table-column>
27 </el-table>
28 <div class="total_warpper">
29 <h3>共计：{{totalPrice}}</h3>
30 <h3>总数：{{totalNumber}}</h3>
31 </div>
32 <!-- 添加弹窗的内容 -->
33 <el-dialog title="添加信息" :visible.sync="addIsDialog" class="addDialog">
34 <el-form :model="formData">
35 <el-form-item label="类目" :label-width="formLabelWidth">
36 <el-input v-model="formData.name" autocomplete="off"></el-input>
37 </el-form-item>
38 <el-form-item label="价格" :label-width="formLabelWidth">
39 <el-input v-model="formData.price" autocomplete="off"></el-input>
40 </el-form-item>
41 <el-form-item label="数量" :label-width="formLabelWidth">
42 <el-input v-model="formData.number" autocomplete="off"></el-input>
43 </el-form-item>
44 </el-form>
45 <div slot="footer" class="dialog-footer">
46 <el-button @click="addIsDialog = false">取 消</el-button>
47 <el-button type="primary" @click="addSureBtn">确 定</el-button>
48 </div>
49 </el-dialog>
50 <!-- 添加编辑的内容 -->
51 <el-dialog title="添加信息" :visible.sync="editIsDialog" class="addDialog">
52 <el-form :model="editData">
53 <el-form-item label="类目" :label-width="formLabelWidth">
54 <el-input v-model="editData.name" autocomplete="off"></el-input>
55 </el-form-item>
56 <el-form-item label="价格" :label-width="formLabelWidth">
57 <el-input v-model="editData.price" autocomplete="off"></el-input>
58 </el-form-item>
59 <el-form-item label="数量" :label-width="formLabelWidth">
60 <el-input v-model="editData.number" autocomplete="off"></el-input>
61 </el-form-item>
62 </el-form>
63 <div slot="footer" class="dialog-footer">
64 <el-button @click="editIsDialog = false">取 消</el-button>
65 <el-button type="primary" @click="editSureBtn">确 定</el-button>
66 </div>
67 </el-dialog>
68 </div>
69 </template>
70
71 <script>
72 export default {
73 data() {
74 return {
75 editIsDialog: false, //编辑弹窗
76 addIsDialog: false, //添加弹窗
77 multipleSelection: [], //存放已选择的数据
78 formData: {
79 name: "",
80 price: "",
81 number: ""
82 },
83 editData: {},
84 formLabelWidth: "200",
85 //表格中的数据
86 tableData: [
87 {
88 name: "苹果",
89 price: 10,
90 number: 1
91 },
92 {
93 name: "香蕉",
94 price: 20,
95 number: 1
96 },
97 {
98 name: "草莓",
99 price: 5,
100 number: 1
101 }
102 ]
103 };
104 },
105 methods: {
106 // 点击发生的变化
107 handleSelectionChange(val) {
108 this.multipleSelection = val; //给定义的数组赋值
109 },
110 handleDelete(index, row) {
111 this.tableData.splice(index, 1); //删除表格的数据
112 },
113 // 点击弹出添加弹窗
114 addDialog() {
115 this.addIsDialog = true;
116 },
117 // 点击添加弹窗的确定按钮
118 addSureBtn() {
119 this.addIsDialog = false;
120 this.tableData.push(this.formData);
121 },
122 // 点击弹出添加弹窗
123 editDialog(index, row) {
124 this.editIsDialog = true;
125 this.editData = row;
126 },
127 editSureBtn(row, index) {
128 this.editIsDialog = false;
129 }
130 },
131 // 通过computed计算属性及时改变
132 computed: {
133 // 总价
134 totalPrice() {
135 var price_total = 0;
136 for (var i = 0; i < this.multipleSelection.length; i++) {
137 price_total +=
138 this.multipleSelection[i].price * this.multipleSelection[i].number;
139 }
140 return price_total;
141 },
142 // 总数
143 totalNumber() {
144 var number_total = 0;
145 for (var i = 0; i < this.multipleSelection.length; i++) {
146 number_total += this.multipleSelection[i].number;
147 }
148 return number_total;
149 }
150 },
151 components: {}
152 };
153 </script>
154
155 <style scoped>
156 .cart {
157 margin: 50px auto;
158 width: 1000px;
159 }
160 .group_btn {
161 margin-bottom: 30px;
162 }
163 .addDialog .el-input {
164 width: 90%;
165 }
166 .total_warpper {
167 text-align: right;
168 margin-top: 30px;
169 }
170 h3 {
171 margin-top: 10px;
172 }
173 </style>
若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。
标签：Vue,computed,price,number,multipleSelection,total,购物车,弹窗,name 来源： https://www.cnblogs.com/CinderellaStory/p/10546263.html