标签:edits 通过 group dial gif ota 9.png def sele
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见!
该购物车效果采用的是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 ,也可扫码,希望能帮助到大家。
标签:edits 通过 group dial gif ota 9.png def sele
原文地址:https://www.cnblogs.com/CinderellaStory/p/10546263.html