Vue+Element+computed實現購物車

本人寫的小程序，功能還在完善中，歡迎掃一掃提出寶貴意見！

 

              

 

該購物車效果採用的是Element-ui庫實現的。

採用了computed計算屬性來實現邏輯操做。

 

功能分析：

1. 全選/全不選/單選。
2. 數量增長、數量減小。
3. 總金額=數量*單價。
4. 商品總價：每一項的總金額相加。
5. 商品總數：每一項的數量相加。
6. 刪除功能。

 

廢話很少說，複製粘貼看效果：  

 

  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       this.formData = {
123         name: "",
124         age: "",
125         sex: ""
126       };
127     },
128     // 點擊彈出添加彈窗
129     editDialog(index, row) {
130       this.editIsDialog = true;
131       this.editData = row;
132     },
133     editSureBtn(row, index) {
134       this.editIsDialog = false;
135     }
136   },
137   // 經過computed計算屬性及時改變
138   computed: {
139     // 總價
140     totalPrice() {
141       var price_total = 0;
142       for (var i = 0; i < this.multipleSelection.length; i++) {
143         price_total +=
144           this.multipleSelection[i].price * this.multipleSelection[i].number;
145       }
146       return price_total;
147     },
148     // 總數
149     totalNumber() {
150       var number_total = 0;
151       for (var i = 0; i < this.multipleSelection.length; i++) {
152         number_total += this.multipleSelection[i].number;
153       }
154       return number_total;
155     }
156   },
157   components: {}
158 };
159 </script>
160 
161 <style scoped>
162 .cart {
163   margin: 50px auto;
164   width: 1000px;
165 }
166 .group_btn {
167   margin-bottom: 30px;
168 }
169 .addDialog .el-input {
170   width: 90%;
171 }
172 .total_warpper {
173   text-align: right;
174   margin-top: 30px;
175 }
176 h3 {
177   margin-top: 10px;
178 }
179 </style> 

 

如有不明白請加羣號：複製 695182980 ，也可掃碼，但願能幫助到你們。