Vue+Element+computed实现购物车

本人写的小程序，功能还在完善中，欢迎扫一扫提出宝贵意见！

         

该购物车效果采用的是Element-ui库实现的。

采用了computed计算属性来实现逻辑操作。

功能分析：

1. 全选/全不选/单选。
2. 数量增加、数量减少。
3. 总金额=数量*单价。
4. 商品总价：每一项的总金额相加。
5. 商品总数：每一项的数量相加。
6. 删除功能。

废话不多说，复制粘贴看效果：

 <template>
   <div class="cart">
     <div class="group_btn">
       <el-button type="success" @click="addDialog">添加</el-button>
     </div>
     <el-table
       :data="tableData"
       border
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center"></el-table-column>
       <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
       <el-table-column prop="name" label="类目" width="180" align="center"></el-table-column>
       <el-table-column prop="price" label="价格" align="center"></el-table-column>
       <el-table-column label="数量" align="center">
         <template slot-scope="scope">
           <el-input-number v-model="scope.row.number" :min="1" :max="10" label="描述文字"></el-input-number>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button size="mini" @click="editDialog(scope.$index, scope.row)">编辑</el-button>
           <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div class="total_warpper">
       <h3>共计：{{totalPrice}}</h3>
       <h3>总数：{{totalNumber}}</h3>
     </div>
     <!-- 添加弹窗的内容 -->
     <el-dialog title="添加信息" :visible.sync="addIsDialog" class="addDialog">
       <el-form :model="formData">
         <el-form-item label="类目" :label-width="formLabelWidth">
           <el-input v-model="formData.name" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="价格" :label-width="formLabelWidth">
           <el-input v-model="formData.price" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="数量" :label-width="formLabelWidth">
           <el-input v-model="formData.number" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="addIsDialog = false">取 消</el-button>
         <el-button type="primary" @click="addSureBtn">确 定</el-button>
       </div>
     </el-dialog>
     <!-- 添加编辑的内容 -->
     <el-dialog title="添加信息" :visible.sync="editIsDialog" class="addDialog">
       <el-form :model="editData">
         <el-form-item label="类目" :label-width="formLabelWidth">
           <el-input v-model="editData.name" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="价格" :label-width="formLabelWidth">
           <el-input v-model="editData.price" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="数量" :label-width="formLabelWidth">
           <el-input v-model="editData.number" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="editIsDialog = false">取 消</el-button>
         <el-button type="primary" @click="editSureBtn">确 定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>

 <script>
 export default {
   data() {
     return {
       editIsDialog: false, //编辑弹窗
       addIsDialog: false, //添加弹窗
       multipleSelection: [], //存放已选择的数据
       formData: {
         name: "",
         price: "",
         number: ""
       },
       editData: {},
       formLabelWidth: "200",
       //表格中的数据
       tableData: [
         {
           name: "苹果",
           price: 10,
           number: 1
         },
         {
           name: "香蕉",
           price: 20,
           number: 1
         },
         {
           name: "草莓",
           price: 5,
           number: 1
         }
       ]
     };
   },
   methods: {
     // 点击发生的变化
     handleSelectionChange(val) {
       this.multipleSelection = val; //给定义的数组赋值
     },
     handleDelete(index, row) {
       this.tableData.splice(index, 1); //删除表格的数据
     },
     // 点击弹出添加弹窗
     addDialog() {
       this.addIsDialog = true;
     },
     // 点击添加弹窗的确定按钮
     addSureBtn() {
       this.addIsDialog = false;
       this.tableData.push(this.formData);
       // 初始化添加表单
       this.formData = {
         name: "",
         age: "",
         sex: ""
       };
     },
     // 点击弹出添加弹窗
     editDialog(index, row) {
       this.editIsDialog = true;
       this.editData = row;
     },
     editSureBtn(row, index) {
       this.editIsDialog = false;
     }
   },
   // 通过computed计算属性及时改变
   computed: {
     // 总价
     totalPrice() {
       var price_total = 0;
       for (var i = 0; i < this.multipleSelection.length; i++) {
         price_total +=
           this.multipleSelection[i].price * this.multipleSelection[i].number;
       }
       return price_total;
     },
     // 总数
     totalNumber() {
       var number_total = 0;
       for (var i = 0; i < this.multipleSelection.length; i++) {
         number_total += this.multipleSelection[i].number;
       }
       return number_total;
     }
   },
   components: {}
 };
 </script>

 <style scoped>
 .cart {
   margin: 50px auto;
   width: 1000px;
 }
 .group_btn {
   margin-bottom: 30px;
 }
 .addDialog .el-input {
   width: 90%;
 }
 .total_warpper {
   text-align: right;
   margin-top: 30px;
 }
 h3 {
   margin-top: 10px;
 }
 </style> 

若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。